focusing on two different sections with a single hover effect

Is it possible to modify the styles of two different divs using CSS when hovering over one div?

#down-icn {  
 position: absolute;
 bottom: 0; right: 25px;
 color: #fff;
 -webkit-transition: color 0.25s ease; border-color 0.5s ease;
 -moz-transition: color 0.25s ease; border-color 0.5s ease;
 -ms-transition: color 0.25s ease; border-color 0.5s ease;
 -o-transition: color 0.25s ease; border-color 0.5s ease;
 transition: color 0.25s ease; border-color 0.5s ease;
}

#down-icn:hover { 
 color: #ef5c30; 
 border-color: #ef5c30;
}

.icn {
 border: 2px solid #fff;
 border-radius: 50%;
 padding: 10px;
 margin-left: 10px;
}

!!! .icn:hover {
 border: 2px solid #000;
 color: #000;
}

If I hover over #down-icn, I would like to change the styles of both #down-icn and .icn.

EDIT - html

   <a href="#footer-anchor">
        <div id="down-icn" data-0="opacity: 1; bottom: 25px;" data-550="opacity: 0; bottom: 100px;">more<i class="icn fa fa-chevron-down fa-2x"></i></div>
    </a>
htmlcss

Answer №1

Have you thought about utilizing your anchor element for hover interactions?

a:hover > #down-icn{ 
 color: #ef5c30; 
 border-color: #ef5c30;
}


a:hover > .icn {
 border: 2px solid #000;
 color: #000;
}

Alternatively, consider the following approach:

#down-icn:hover{ 
     color: #ef5c30; 
     border-color: #ef5c30;
 }


#down-icn:hover > .icn {
     border: 2px solid #000;
     color: #000;
 }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Painting Magic: Exploring the World of Canvas Zoom and Moves

I'm having trouble implementing zoom and pan functionality for this particular canvas drawing. While there are examples available for images, my case is different since I am not working with images. Any tips or suggestions on which libraries to use wo ...

javascriptjqueryhtmlcanvashtml5-canvas

The notification panel pop-up box keeps moving away from the right side

I'm currently in the process of creating a straightforward vertical notification panel, similar to the one seen on Stack Overflow. However, I've encountered an issue where the pop-up is not staying positioned correctly to the right side. It behav ...

javascripthtmljquerycss

Could the issue lie with PHP or the caching system?

I'm encountering a frustrating issue with my simple test that I just can't seem to resolve. It seems like there's some sort of glitch involving images and PHP, as I can only display one image at a time. The script looks correct to me, so I&a ...

phphtml

Mobile values in tailwindcss take precedence over breakpoints values, overriding them

I have encountered a puzzling issue that seems to have no answers thus far. Whenever I set paddings or margins for mobile devices and attempt to adjust these values for larger screens, the original mobile base value stubbornly persists and overrides my sp ...

cssnext.jstailwind-css

What are the advantages of importing CSS files from JS source code with webpack, rather than building CSS in isolation as traditionally done?

If you're looking for information on how to load CSS with webpack, check out the documentation here: https://webpack.js.org/guides/asset-management/#loading-css1 The webpack documentation suggests importing CSS files from JavaScript code and using ex ...

csswebpack

Is there a way to add a gradient of colors to the background?

I'm looking for instructions on how to achieve a multi-color background screen similar to the image I have provided. Can anyone help with this? ...

css

What is the method in PHP to send an HTML file along with a value in response to a POST request?

I have a PHP file where I want to include a dropdown list and submit button. The dropdown list should display filenames for the user to choose from. Once the user selects a filename from the dropdown list and clicks the submit button, the PHP file should r ...

phphtml

Problems with updating HTML/Typescript in Visual Studio and Chrome are causing frustration

While working on my company's application locally and making HTML/TS changes, I am facing an issue. Whenever I save/hot reload and refresh the browser, no changes seem to take effect. I've tried stopping debugging, building/rebuilding, and runni ...

htmltypescriptvisual-studio

Struggling with React integration of AdminLTE3 sidebar treeview?

I have a requirement to create a React sidebar with a category 'Staff' that, when clicked, reveals three subordinate categories. Below is the code snippet: import React, { Component } from "react"; export default class Sidebar extends Componen ...

javascripthtmlreactjsbootstrap-4adminlte

Managing various choices in a Select menu using a single submit button

My method of using mysql to insert data into dropdown menus is not working as expected. Each dropdown menu has a unique name assigned from the database query $stmt. The content for each dropdown menu is retrieved through another query, $stmt2. My goal i ...

phphtmlmysql

Show on smartphones, conceal on desktops - Activation/URL

I'm attempting to create a click-to-call link on my website using the following: <a class="mobile-only" href="tel:+534306464456"><p class="">Click Here to call us</p></a> I want this link to only show up on mobile devices, sp ...

htmlcss

How come my columns are stacking on top of each other instead of being positioned side by side?

I am having an issue with my products displaying below each other instead of next to each other in their own column. How can I adjust the layout so that they appear side by side? View image <tr> <th>Month</th> <div *ngFor="let p ...

htmlangularhtml-tablemultiple-columns

Enhance design based on scrolling function in React

I've been trying to update the color of my header when a user scrolls the page, but for some reason, my onScroll method isn't working. Can anyone help me figure out why and how to solve this issue? The onScroll method is triggered by the bottom T ...

javascriptcssreactjsgatsby

Show the menu when hovering in reactjs

Currently, in my react project, I am implementing dropdown menus using the reactstrap css framework. Example.Js <Dropdown className="d-inline-block" onMouseOver={this.onMouseEnter} onMouseLeave={this.onMouseLeave} ...

javascriptcssreactjstwitter-bootstrapreactstrap

Can you display the menu and then conceal it by clicking elsewhere?

I am facing a unique situation where the body tag does not visually wrap all content. In this scenario, I have 3 TR's that each contain 2 TD's - one for information and one for a yellow div. By clicking on the Info TD, a div opens (positioned a ...

jqueryhtml

Issues with linking in Codeigniter

For my college project, I decided to use the codeigniter framework. However, I am facing some issues with links. When I attempt to include a link within an array, like so: <li> <a href="<?php echo site_url('Controller_test/testFunctio ...

phphtmlcodeigniterhyperlink

Implementing an Onclick function in HTML

I have an HTML code and I am looking to add an onclick event for a button named GET DATA. When the button is clicked, I want to send data for userId and categoryId to a PHP file. Can someone help me implement this functionality in my existing code? Here ...

javascripthtmlajax

The process of running npx create-react-app with a specific name suddenly halts at a particular stage

Throughout my experience, I have never encountered this particular issue with the reliable old create-react-app However, on this occasion, I decided to use npx create-react-app to initiate a new react app. Below is a screenshot depicting the progress o ...

javascripthtmlcssreactjstypescript

Guide to activating animation on one element when hovering over another element?

I am setting up an HTML 5 range element and looking to enhance the user experience. Specifically, I want to implement a feature where when the user hovers over the range, the height and width of the thumb should increase to 12 pixels. CSS .myrange::-webk ...

javascriptjquerycsshtmlcss-transitions

My website is currently experiencing issues with all of the CSS references not working. This problem applies to both external and internal CSS files and consistently

I'm encountering 404 errors when trying to load both internal and external files on a website through my browser. My code snippet looks like this: <link rel="stylesheet" type = "text/css" href='anoceanofsky.css'/> Despite clearing m ...

cssref