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

Is there a way to do HTML select-option in a reversed order?

Having an issue with my HTML select element: <select> <option>...</option> <option>...</option> <option>...</option> </select> Currently, all the options are displayed below the select field. I ...

htmlpopup

How can I use JavaScript to trigger a button click event inside an iframe element

Is there a way to retrieve the inner HTML contents of a clicked element in an iframe loaded content using JavaScript? This code uses jQuery: var elements = document.getElementsByTagName('iframe'); [].forEach.call(elements, function(elem ...

javascripthtmliframe

javascript Why isn't the initial click registering?

In my table, users can select certain rows by using checkboxes. I have implemented some JavaScript functionality that allows them to select each checkbox individually and also use a "Select All" option. Additionally, there is code written to enable the use ...

javascriptjqueryhtmlcheckbox

Modifying CSS files in real-time

I've been attempting to dynamically change the CSS file, but I've run into an issue: Whenever I try to alter the style, it seems to work correctly while in "debug mode", showing that the changes are applied. However, once the JavaScript function ...

javascripthtmlcss

Adding dynamic HTML to the body in AngularJS based on URL alterations

I am currently developing a single-page application using Angular. I am trying to create a card stack made of divs, similar to this concept. https://i.stack.imgur.com/42M06.png The idea is that the app will have various URL links and a card should be app ...

htmlcssangularjsangular-ui-routerappend

Only the initial value is being processed in the for loop using Javascript

I am having issues trying to sum the values within a for loop sourced from my Django database using JavaScript. Currently, when I iterate through the loop, only the first value in the array is returned. I need assistance in finding a solution that allows ...

javascripthtmldjangomath

What is the best way to choose the final XHTML <span> tag with a specific class using XPath?

My target XHTML document structure is as follows: <html> <head> </head> <body> <span class="boris"> </span> <span class="boris"> </span> <span class="johnson"> </span> </body> </html> ...

htmlxmlxhtmlxpath

Tips for adjusting the font size options within the Autocomplete feature of Material UI Version 5

Is there a way to adjust the font size of the drop-down items? I have tried various methods to change the font size, including: How do I change Material UI Autocomplete font size? How to change fontsize of options in Material ui autocomplete? Unfortuna ...

cssreactjsmaterial-uiautocomplete

Position the middle character within a span that has the identical width and height

My goal is to align characters in the center of a span. CSS span{border-radius:10px; width:20px; height:20px; color:#fff; background:#cc0000; text-align:center; line-height:20px; display:block;} HTML <span>+</span><br> <span>-&l ...

htmlcss

Obtain the URL value using jQuery and place it inside a <span> element

How can I insert a href value into the span tag like this? <p class="name"> <a download="adja-lo.pdf" title="adja-lo.pdf" href="http://localhost/MatrixDRSnews/apps/Matrix/server/php/files/adja-lo.pdf">adja-lo.pdf</a> </p> ...

javascriptjqueryhtmlhref

I am interested in creating some CSS styles to modify the color of a toggle switch's plus sign icon

Can anyone help me customize my Wordpress theme? I'm trying to change the color of my toggle plus signs to white using CSS, but I can't figure it out. Your assistance would be greatly appreciated. Here is the URL: This is the CSS code I attempt ...

css

Issue with Bootstrap navigation bar not displaying on iPad devices

Currently, I am working on creating a custom bootstrap menu that displays properly on an iPad screen size. I have implemented the standard navbar code from Bootstrap with a few tweaks. While it works well on smartphones and laptops, the issue arises when ...

htmlcsstwitter-bootstrapipad

The scrolling feature within individual div elements seems to be malfunctioning in Ionic 2

In my current project using Ionic 2, I am faced with the task of designing a screen that contains two distinct grid views. The first grid view needs to occupy 40% of the height, allowing for scrolling within that specified area. On the other hand, the se ...

htmlcssangularjsionic2hybrid-mobile-app

Step-by-step guide on dynamically fetching additional images from a directory using php, jquery, and ajax

I have a scenario where I have multiple folders, each containing up to 20 images. On my HTML page, I want to display the first 5 images and provide a "click to view more" option to show the remaining 15 images when clicked. Currently, the issue I am facin ...

javascriptphpjqueryhtmlajax

Retrieve JSON data by making a POST request to a website's API

Can you help me retrieve Json data from a website API using JavaScript? I'm trying to fetch quotes from the following website: for my quotes generator page. While I have some understanding of making GET requests, it seems that this API requires POST ...

javascripthtmljson

Is it possible to extract the CSS path of a web element using Selenium and Python?

I am working with a collection of elements using find_elements_by_css_selector, and my next task is to extract their css locators. I attempted the following approach: foo.get_property('css_selector') However, it seems to be returning None. ...

pythoncssseleniumselenium-webdriverwebdriver

Creating space between elements in CSS div elements

I've come across numerous resources on this topic that have already been answered, but none of them have provided a satisfactory solution. Here's the scenario: I have created a basic fiddle showcasing the desired behavior: @ See fidlle If I h ...

htmlcss

Update the code-behind for the Joomla "submit article" page

After incorporating a new template on my Joomla website, I encountered an issue with the "submit an article" page. The fields in the publishing tab were altered to width: 0px;. Here is how the HTML for the category dropdown appears: <div id="jform_cati ...

htmlcssjoomla

Exploring the varying treatment of the noscript tag across different web browsers

I've been searching everywhere, but I can't find any information on this topic. What I really want to understand is what browsers do with the content inside a noscript tag when JavaScript is enabled. Let's consider an example: According t ...

javascripthtmlcsscross-browsernoscript

Excessive white space within a relative block div causing the content to appear smaller in comparison

Currently, I am developing a straightforward form that includes CSS-based help boxes. These help boxes are designed to appear when the user hovers over the corresponding row. After leaving my project untouched for a few days, I encountered some bugs upon ...

htmlcss