How to Target All Divs of The Same Class Except for Hovered Over Div

How to target all divs of the same class except for hovered over div?

The solution that follows will work only if your elements are adjacent, like a navigation bar. Maybe that's not your situation, but it can help others. Must say that it is cross-browser CSS2.

Wrap your <div> inside a container:

<div class="container">
    <div class="target"></div>
    <div class="target"></div>
    <div class="target"></div>
    <div class="target"></div>
    <div class="target"></div>
</div>

And use it to control :hover

.target {
    background-color: #444;
}
.container {
    float: left;
}
.container:hover .target {
    background: #bbb;
}
.container .target:hover {
    background: #444;
}

It's working here

applying hover to all elements with same class name with css

Based on your HTML structure you can manage this with a sibling selector and well as a direct one, for instance:

.right:hover ~ .right,
.right:hover {
  z-index: 10;
}

body {  margin: 0;}
#container {  position: relative;  background: #D5D8DC;  height: 100px;  width: 100px;  margin-top: 10px;  margin-left: 10px;}
.right {  background: #2ECC71;}
.right:nth-child(1) {  position: absolute;  height: 80%;  width: 10%;  top: 0;  right: 0;}
.right:nth-child(2) {  position: absolute;  height: 10%;  width: 80%;  top: 0;  right: 0;}
.right:nth-child(3) {  position: absolute;  height: 80%;  width: 10%;  top: 0;  left: 20%;  z-index: 10;}
.right:nth-child(4) {  position: absolute;  height: 10%;  width: 80%;  right: 0;  bottom: 20%;}
.left {  background: #E74C3C;}
.left:nth-child(5) {  position: absolute;  height: 10%;  width: 80%;  bottom: 0;  left: 0;}
.left:nth-child(6) {  position: absolute;  height: 80%;  width: 10%;  bottom: 0;  left: 0;}
.left:nth-child(7) {  position: absolute;  height: 10%;  width: 80%;  left: 0;  top: 20%;}
.left:nth-child(8) {  position: absolute;  height: 80%;  width: 10%;  bottom: 0;  right: 20%;}
.right:hover~.right,.right:hover {  z-index: 10;}
.left:hover~.left,.left:hover {  z-index: 10;}

<div id='container'>  <div class='right'></div>  <div class='right'></div>  <div class='right'></div>  <div class='right'></div>  <div class='left'></div>  <div class='left'></div>  <div class='left'></div>  <div class='left'></div></div>

All elements filter but hovered

Here is on hover of Child Element rest of Child is filter

.parent .child:not(:hover) {  color:#00ffff;  -webkit-filter: grayscale(1);  -moz-filter: grayscale(1);  -ms-filter: grayscale(1);  filter: grayscale(1);  opacity: .75;}

<div class="parent">  <div class="child">Child 1</div>  <div class="child">Child 2</div>  <div class="child">Child 3</div></div>

Hover on element and highlight all elements with the same class

The best you can do using pure CSS is this:

.classname:hover ~ .classname {
    background-color: yellow;
}

But this only highlights all siblings with a class classname after the hovered element.

You have to use JavaScript to highlight all elements;

var elms = document.getElementsByClassName("classname");
var n = elms.length;
function changeColor(color) {
    for(var i = 0; i < n; i ++) {
        elms[i].style.backgroundColor = color;
    }
}
for(var i = 0; i < n; i ++) {
    elms[i].onmouseover = function() {
        changeColor("yellow");
    };
    elms[i].onmouseout = function() {
        changeColor("white");
    };
}

If you have multiple classes and want to generalize this, use something like this:

var classes = ["one", "two", "three"]; //list of your classes
var elms = {};
var n = {}, nclasses = classes.length;
function changeColor(classname, color) {
    var curN = n[classname];
    for(var i = 0; i < curN; i ++) {
        elms[classname][i].style.backgroundColor = color;
    }
}
for(var k = 0; k < nclasses; k ++) {
    var curClass = classes[k];
    elms[curClass] = document.getElementsByClassName(curClass);
    n[curClass] = elms[curClass].length;
    var curN = n[curClass];
    for(var i = 0; i < curN; i ++) {
        elms[curClass][i].onmouseover = function() {
            changeColor(this.className, "yellow");
        };
        elms[curClass][i].onmouseout = function() {
            changeColor(this.className, "white");
        };
    }
};

how to hide all div's except one that is associated with a onmouseover element using jquery?

$('#list-of-items li').on('mouseenter mouseleave', function(e) {
    $('#content'+this.id.replace('item', ''))[e.type==='mouseenter'?'show':'hide']();
})​;​

FIDDLE

EDIT

I think this is what you are looking for:

$(function(){
    $('#list-items li').on('mouseenter', function() {
        $('#content'+this.id.replace('item', '')).show().siblings().hide();
    });
});

FIDDLE

How to affect other elements when one element is hovered

If the cube is directly inside the container:

#container:hover > #cube { background-color: yellow; }

If cube is next to (after containers closing tag) the container:

#container:hover + #cube { background-color: yellow; }

If the cube is somewhere inside the container:

#container:hover #cube { background-color: yellow; }

If the cube is a sibling of the container:

#container:hover ~ #cube { background-color: yellow; }

On a CSS hover event, can I change another div's styling?

Yes, you can do that, but only if #b is after #a in the HTML.

If #b comes immediately after #a: http://jsfiddle.net/u7tYE/

#a:hover + #b {
    background: #ccc
}

<div id="a">Div A</div>
<div id="b">Div B</div>

That's using the adjacent sibling combinator (+).

If there are other elements between #a and #b, you can use this: http://jsfiddle.net/u7tYE/1/

#a:hover ~ #b {
    background: #ccc
}

<div id="a">Div A</div>
<div>random other elements</div>
<div>random other elements</div>
<div>random other elements</div>
<div id="b">Div B</div>

That's using the general sibling combinator (~).

Both + and ~ work in all modern browsers and IE7+

If #b is a descendant of #a, you can simply use #a:hover #b.

ALTERNATIVE: You can use pure CSS to do this by positioning the second element before the first. The first div is first in markup, but positioned to the right or below the second. It will work as if it were a previous sibling.

Same Class Name for div but hover only one at a time

Your problem is that you are telling all the members of the class to change color or text. Simply change the inner part to just "this" - the hovered element

$( ".mytile" ).hover(
    function() {
        $( this ).text(  "Hover" );
    }, function() {
        $( this ).text( "No hover");
    }
 );

The JQuery hover documentation has a similar example and more information

How to target only the current hovering div with jquery when there are many other divs with the same class?

Use this, which is the target of the event, along with jQuery traversal functions:

$('a.video-item-link').hover(function() {
     // in
     $(this).find('div.mouseover').show();
  }, function() {
     // out
     $(this).find('div.mouseover').hide();
  }
);

Though from your markup, it looks like you need $(this).find('div.mouseover-element')

JavaScript to find whether any div with a particular class was hovered over and then identify the exact div

you can use jQuery mouseover or mouseenter event based on your requirement like this:

Based on this:

The mouseover event triggers when the mouse pointer enters the div
element, and its child elements.

However

The mouseenter event is only triggered when the mouse pointer enters
the div element.

$(".document-container-title").mouseover(function (e) {
     console.log(e.currentTarget.textContent);
 })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="doc1" class="document-container-title">
        <h3>Doc 1</h3>
    </div>
    <div id="doc2" class="document-container-title">
        <h3>Doc 2</h3>
    </div>
    <div id="doc3" class="document-container-title">
        <h3>Doc 3</h3>
    </div>

---

Related Topics