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

Question

The JSFiddle below shows DIV B changing color when I hover on DIV A. But I need the exact opposite: to hover on DIV B and have DIV A change color.

http://jsfiddle.net/u7tYE/

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

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

I can't rearrange the raw html elements, they need to stay the same.

Is this possible with CSS, or only Javascript?

symlink · Accepted Answer · 2016-02-28T08:11:59.720

You'll need a little bit of jQuery, since you can't alter a previous siblings styling on hover in CSS:

$('#b').hover(
  function(){
    $('#a').css({'background':'#ccc'});
  },
  function(){
    $('#a').css({'background':'initial'});
  }
);

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="a">Div A</div>
<div id="b">Div B</div>

EDIT: w/ vanilla javascript:

var a = document.getElementById('a');
var b = document.getElementById('b');

b.onmouseover = function(e) {
 a.style.background = '#CCC';
}

b.onmouseout = function(e) {
 a.style.background = 'initial';
}

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

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

Is this possible to do with just Javascript? – user3747660 Feb 28 '16 at 08:06 — user3747660, Feb 28 '16 at 08:06
See my edit, same thing with vanilla javascript. – symlink Feb 28 '16 at 08:12 — symlink, Feb 28 '16 at 08:12

score 0 · Answer 2 · answered Feb 28 '16 at 08:11

0

Maybe what you need is the General Sibling Selector: it selects any sibling, not only the next one.

#b:hover ~ #a { background: ...; }

answered Feb 28 '16 at 08:11

PeterMader

6,987
1
21
31

score 0 · Answer 3 · answered Feb 28 '16 at 08:13

little bit difficult with css but try this

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
</head>
<style type="text/css">
 body{
  margin: 0;
  padding: 0;
 }

div#a{
  width: 100px;
  height: 100px;
  background-color: orange;
  margin: 10px;
  position: absolute;
  top:110px;
}

div#b{
  width: 100px;
  height: 100px;
  background-color: gray;
  margin: 10px;
  position: absolute;
}

div#a:hover +div#b{
  background-color: black;
}


</style>

 <div id="a"></div>
 <div id="b"></div>

</body>
</html>

or else, the easiest way is to use jquery.this is full code to do it.try this.hope this will help to you.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<style type="text/css">
 body{
  margin: 0;
  padding: 0;
 }

div#a{
  width: 100px;
  height: 100px;
  background-color: orange;
  margin: 10px;
  
}

div#b{
  width: 100px;
  height: 100px;
  background-color: gray;
  margin: 10px;
}




</style>

 <div id="a"></div>
 <div id="b"></div>

<script type="text/javascript">
  $("div#b").mouseenter(function(){
    $("div#a").css({"background-color":"black"});
  });

  $("div#b").mouseleave(function(){
    $("div#a").css({"background-color":"orange"});
  });



</script>
</body>
</html>

score 0 · Answer 4 · answered Feb 28 '16 at 08:13

This can be done in javascript

// mouse is over div b
document.getElementById("b").onmouseover = function(){
    document.getElementById("a").style.background = "#ccc"
}
// mouse leaves div b
document.getElementById("b").onmouseout = function(){
    document.getElementById("a").style.background = "intial"
}

score 0 · Answer 5 · answered Feb 28 '16 at 08:29

You can use parent element to control hover style, like this:

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

.parent:hover div {
  background: #ccc;
}
.parent div:hover,
.parent div:hover ~ div {
  background: none;
}

http://jsfiddle.net/qemmhpem/1/

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

5 Answers5