Is it possible for CSS hover to have an impact on multiple divs that share the same class name

Question

Is it possible for CSS hover to have an impact on multiple divs that share the same class name

There are 5 divs on the page, all with the same class name as shown below:

Here is the CSS:

.test:hover{
   color:red;
}

And here is the HTML:

<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>

Now, imagine these divs are in different parent divs on the page...

The goal is for all 5 divs to change to red when hovering over any of them, not just the one being hovered over...

Unfortunately, they do not share the same parents, so I can't wrap them in a parent div and use a hover effect. Is there a way to achieve this using CSS, or will I need to resort to JavaScript?

html css

Answer 1

Answer №1

An effective vanilla JavaScript method that can be utilized in compliant browsers supporting `[].forEach()` and `document.querySelectorAll()`, especially when CSS is unable to perform the intended task, involves the following code snippet:

function toggleClass (event, classNameToFind, classNameToToggle) {
    [].forEach.call(document.querySelectorAll('.' + classNameToFind), function(element){
        element.classList[event.type === 'mouseover' ? 'add' : 'remove'](classNameToToggle);
    });
}

var elements = document.querySelectorAll('.test');

for (var index = 0, length = elements.length; index < length; index++){
    elements[index].addEventListener('mouseover', function(event){
        toggleClass(event, 'test', 'highlight');
    });
    elements[index].addEventListener('mouseout', function(event){
        toggleClass(event, 'test', 'highlight');
    });
}

Check out the JS Fiddle demo for a demonstration.

For further reading:

Answer 2

An effective vanilla JavaScript method that can be utilized in compliant browsers supporting `[].forEach()` and `document.querySelectorAll()`, especially when CSS is unable to perform the intended task, involves the following code snippet:

function toggleClass (event, classNameToFind, classNameToToggle) {
    [].forEach.call(document.querySelectorAll('.' + classNameToFind), function(element){
        element.classList[event.type === 'mouseover' ? 'add' : 'remove'](classNameToToggle);
    });
}

var elements = document.querySelectorAll('.test');

for (var index = 0, length = elements.length; index < length; index++){
    elements[index].addEventListener('mouseover', function(event){
        toggleClass(event, 'test', 'highlight');
    });
    elements[index].addEventListener('mouseout', function(event){
        toggleClass(event, 'test', 'highlight');
    });
}

Check out the JS Fiddle demo for a demonstration.

For further reading:

Answer 3

Answer №2

If you're looking to achieve a specific effect, using JQuery can simplify the process. You can try copying the code below into an .html file for testing:

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script>
        $(document).ready(function() {
            $(".test").hover(
              function() {
                $(".test").css("background-color", "red");
              }, function() {
                $(".test").css("background-color", "");
              }
            );
        });
        </script>
    </head>
    <body>
        <div class="test">My Div</div><br />
        <div class="test">My Div</div><br />
        <div class="test">My Div</div><br />
        <div class="test">My Div</div><br />
        <div class="test">My Div</div>
    </body>
</html>

Answer 4

If you're looking to achieve a specific effect, using JQuery can simplify the process. You can try copying the code below into an .html file for testing:

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script>
        $(document).ready(function() {
            $(".test").hover(
              function() {
                $(".test").css("background-color", "red");
              }, function() {
                $(".test").css("background-color", "");
              }
            );
        });
        </script>
    </head>
    <body>
        <div class="test">My Div</div><br />
        <div class="test">My Div</div><br />
        <div class="test">My Div</div><br />
        <div class="test">My Div</div><br />
        <div class="test">My Div</div>
    </body>
</html>

Answer 5

Answer №3

In current times, CSS does not provide a way to target an element's parent directly. This restriction also applies when attempting to select an element based on its parent. It serves as a little demonstration of the limitations of CSS.

Answer 6

In current times, CSS does not provide a way to target an element's parent directly. This restriction also applies when attempting to select an element based on its parent. It serves as a little demonstration of the limitations of CSS.

Answer 7

Answer №4

Take a look at this provided code snippet:

css:

.example{
background: none repeat scroll 0 0 #FFFFFF;
height: 105px;
opacity: 0.1;
position: absolute;
top: 0;
width: 5%;
}
.example:hover ~ div{
color:red;
cursor:pointer;
}

html:

<div class="example"></div>
<div class="container">
  <div class="test">1111</div>
</div>
<div class="container">
  <div class="test">2222</div>
</div>
<div class="container">
  <div class="test">3333</div>
</div>
<div class="container">
  <div class="test">4444</div>
</div>
<div class="container">
  <div class="test">5555</div>
</div>

Explore the live demonstration via this link: http://jsfiddle.net/eN49z/

Answer 8

Take a look at this provided code snippet:

css:

.example{
background: none repeat scroll 0 0 #FFFFFF;
height: 105px;
opacity: 0.1;
position: absolute;
top: 0;
width: 5%;
}
.example:hover ~ div{
color:red;
cursor:pointer;
}

html:

<div class="example"></div>
<div class="container">
  <div class="test">1111</div>
</div>
<div class="container">
  <div class="test">2222</div>
</div>
<div class="container">
  <div class="test">3333</div>
</div>
<div class="container">
  <div class="test">4444</div>
</div>
<div class="container">
  <div class="test">5555</div>
</div>

Explore the live demonstration via this link: http://jsfiddle.net/eN49z/

Answer 9

Answer №5

Unfortunately, achieving the desired effect using CSS alone is not possible. CSS is limited to affecting elements downwards in the DOM tree and cannot travel upwards to affect parent elements.

However, by utilizing JavaScript, specifically with jQuery in this example, you can achieve the desired effect. The method used to target other <div> elements with the class test may vary depending on the nesting structure and relationships among elements.

Here is a sample markup illustrating the situation:

<div>
    Parent 1
    <div class="test"></div>
</div>
<div>
    Parent 2
    <div class="test"></div>
</div>
<div>
    Parent 3
    <div class="test"></div>
</div>

The CSS code is straightforward. The .hover class is dynamically added by jQuery, not using the :hover state:

.test:hover, .test.hover {
    background-color: red;
}

The JavaScript code might look something like this:

$(function() {
    $(".test").hover(function() {
        // Find '.test' in all siblings of the parent containing '.test'
        $(this).parent().siblings().find(".test").addClass("hover");
    }, function() {
        // Additional criteria can be applied to select specific '.test' elements
        $(document).find(".test").removeClass("hover");
    });
});

http://jsfiddle.net/teddyrised/fHwFf/

Answer 10

Unfortunately, achieving the desired effect using CSS alone is not possible. CSS is limited to affecting elements downwards in the DOM tree and cannot travel upwards to affect parent elements.

However, by utilizing JavaScript, specifically with jQuery in this example, you can achieve the desired effect. The method used to target other <div> elements with the class test may vary depending on the nesting structure and relationships among elements.

Here is a sample markup illustrating the situation:

<div>
    Parent 1
    <div class="test"></div>
</div>
<div>
    Parent 2
    <div class="test"></div>
</div>
<div>
    Parent 3
    <div class="test"></div>
</div>

The CSS code is straightforward. The .hover class is dynamically added by jQuery, not using the :hover state:

.test:hover, .test.hover {
    background-color: red;
}

The JavaScript code might look something like this:

$(function() {
    $(".test").hover(function() {
        // Find '.test' in all siblings of the parent containing '.test'
        $(this).parent().siblings().find(".test").addClass("hover");
    }, function() {
        // Additional criteria can be applied to select specific '.test' elements
        $(document).find(".test").removeClass("hover");
    });
});

http://jsfiddle.net/teddyrised/fHwFf/

Is it possible for CSS hover to have an impact on multiple divs that share the same class name

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Why do all the select boxes require two clicks to open the drop-down menu when the function is activated?

Guide to setting up the primary navigation in the WordPress administration panel

Preserve present condition following a jQuery click event

What is the reason behind the change in style hierarchy when using ':last-child'?

Form fields in Bootstrap 4 will consistently expand downward in the select dropdown menu

"Trouble with Bootstrap 4 menu: only one dropdown opens at a time

The line segment refuses to remain hidden beneath the h2 tag

Can an unordered list be nested inside an inline list item in HTML or XHTML?

Utilizing React to Style Background Positions

Prevent keypress from being detected while the confirm box is displayed

Tap on the screen to initiate a phone call using dompdf

How can I properly integrate jQuery libraries, along with CSS, in a create-react-app project?

Toggle button color on click by using ng-click on a different button

The browser is capable of detecting multiple key presses using JavaScript

The vue template is indicating an error related to unused variables according to the eslint rule vue/no

Perform an Ajax request with JQuery in an HTML document and transfer the response to a different HTML page

`Set the body height to equal that of the entire document`

What is the best way to ensure a div container fills the entire height of the screen?

what is the best way to change background image in media query for various screen sizes?

Creating a dropdown navigation menu using CSS from href divs