1

How to force two elements become hovered at the same time being both different?

For example:

<div id="dad">

     <div id="bro"></div>
     <div id="sis"></div>

</div>

#bro:hover {
     background: url(imgBRO.jpg);
}

#sis:hover {
     background: url(imgSIS.jpg);
}

If I put mouse over #bro, the #sis:hover is active and both images appears on each element . Same if mouse is over #sis .

Someone can help me? The solution can be CSS or JS, please.

rdllngr
  • 225
  • 2
  • 10
  • possible duplicate of [On a CSS hover event, can I change another div's styling?](http://stackoverflow.com/questions/6910049/on-a-css-hover-event-can-i-change-another-divs-styling) – Madness Aug 27 '15 at 15:22
  • possible duplicate of [How to affect other elements when a div is hovered](http://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered) – Dave Aug 27 '15 at 15:24

4 Answers4

5

If you don't have any other child elements for #dad you can do this. This will trigger the hover when you hover any of the elements

#dad {
  display: inline-block;
}
div div {
  width: 100px;
  height: 100px;
  background: orange;
}
#dad:hover #bro {
  background: red;
}
#dad:hover #sis {
  background: green;
}
<div id="dad">

  <div id="bro"></div>
  <div id="sis"></div>

</div>
Akshay
  • 13,362
  • 4
  • 39
  • 66
  • I had seen this solution in other threads, but it never worked in my codes. But the way you simplified everything, worked like a charm . I finally learned this logic! Thank you , bro . – rdllngr Aug 27 '15 at 16:47
3

You can refer to the parent element being hovered:

#dad:hover #bro {
     background: url(imgBRO.jpg);
}

#dad:hover #sis {
     background: url(imgSIS.jpg);
}

jsfiddle

Maksim Solovjov
  • 3,069
  • 15
  • 27
0

You can use onmouseover and onmouseout event triggers

<div id="dad">
 <div id="bro" onmouseover="showTheBG()" onmouseout="hideTheBG()"></div>
 <div id="sis" onmouseover="showTheBG()" onmouseout="hideTheBG()"></div>
</div>

and JS like

function showTheBG() {
  document.getElementById('bro').style.backgroundColor = 'blue';
  document.getElementById('sis').style.backgroundColor = 'red';
}

Here is a codepen

Jacob Petersen
  • 1,422
  • 7
  • 16
0

You can try this, if it help you

$(document).ready(function(){ $( "#bro,#sis" ).hover(function() {

//Your operation

}); });

Akshay Chawla
  • 525
  • 1
  • 5
  • 15