On hover of div a change the color of div b

Question

I'm trying to get it so that when you hover div B then the background of div A changes.

<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>

CSS

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

The `selectorA ~ selectorB` syntax only works in one direction—it selects elements that match `selectorB` that are siblings of *and occur after* elements that match `selectorA`. In your example, `selector B` comes before `selector A` in the html. You will need to use javascript or a different HTML structure in order to achieve your desired result. — Sean, Jan 10 '16 at 01:59
It's possible with flexbox to make the items appear in this order while they actually are the other way around in the html, see my updated answer. — seahorsepip, Jan 10 '16 at 02:15
Possible duplicate of [Select previous siblings on hover](http://stackoverflow.com/questions/13994633/select-previous-siblings-on-hover) — , Jan 10 '16 at 05:57

seahorsepip · Answer 1 · 2016-01-10T02:33:59.623

Edit:

Css only method using flexbox to reorder #a and #b in the order you want while they actually are reversed in the html.

http://jsfiddle.net/15j14Ljb/

You can only affect child elements or elements after the hovered element with css :/

You can do it with jQuery (js) though:

var originalBackground;
$("#b").hover(function() {
    originalBackground = $("#a").css("background");
    $("#a").css("background", "#ccc");
}), function () {
    $("#a").css("background", originalBackground);
});

Or pure js:

var originalColor = document.getElementById("a").style.backgroundColor;
document.getElementById("b").onmouseover = function() {
        document.getElementById("a").style.backgroundColor = "blue";
    }
    document.getElementById("b").onmouseleave = function() {
        document.getElementById("a").style.backgroundColor = originalColor;
    }

I prefer the jQuery one. When I use that code though, the background will stay `#ccc` and not go back to white after you remove the hover. — user2252219, Jan 10 '16 at 02:17
My bad forgot to change the color back after hover. Updated the code to fix it, I made sure it sets the color back to the color it was the moment before it changed. — seahorsepip, Jan 10 '16 at 02:30

Mi-Creativity · Accepted Answer · 2016-01-10T02:24:23.247

1

You can do it only if #b comes before #a, because

element1~element2 Selects every element2 that are preceded by element1

JS Fiddle 1

#b:hover ~ #a {
  background-color: #ccc;
}

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

or make it like #a:hover ~ #b

JS Fiddle 2

#a:hover ~ #b {
  background-color: #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>

To achieve it using javascript can be done in many ways, here done by .hover() ^(*) function:

JS Fiddle 3

$('#a').hover(function(){
    $('#b').css({'background-color':'#CCC'});
}, function(){
    $('#b').css({'background-color':'transparent'});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<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>

^(*) https://api.jquery.com/hover/

edited Jan 10 '16 at 02:24

answered Jan 10 '16 at 02:09

Mi-Creativity

9,554
10
38
47

Why background color transparent? Seems like a better idea to save the current background color of #a to a variable on hover before changing the color so you can use that instead of transparent. – seahorsepip Jan 10 '16 at 02:28
@Mi-Creativity is there a way to make a fade transition on the jquery? I tried adding `transition` to the css. – user2252219 Jan 10 '16 at 02:30
@seahorsepip, or he can just set the color he wants instead and save one line of code? – Mi-Creativity Jan 10 '16 at 02:33
@user2252219 you can use `.addClass()` check this https://jsfiddle.net/Mi_Creativity/cspww56f/1/ – Mi-Creativity Jan 10 '16 at 02:36
addClass is risky since the class might be needed or already used in the css. I would instead add a data attribute and target that with css. So #a[data-hover] :) – seahorsepip Jan 10 '16 at 02:38
@seahorsepip, with much respect, as you probably know, when it comes to programming there's usually more than one way to do things, specifiying a unique class in css for this is not that hard or mission impossible, also I'd rather add another class in css than using `data-*` attributes and keep the DOM intact, but thanks for your suggestion – Mi-Creativity Jan 10 '16 at 02:42

score 0 · Answer 3 · answered Jan 10 '16 at 02:10

0

Here is a simple javascript solution.

window.addEventListener("load", function() {
  var HEADER1 = document.getElementById("header");
  HEADER1.addEventListener("mouseover", display, false);
  HEADER1.addEventListener("mouseout", back1, false);
}, false);

function display() {
  var mainObject = document.getElementById("object");

  mainObject.style.display = "block";
}

function back1() {
  var mainObject = document.getElementById("object");
  mainObject.style.display = "none";
}

answered Jan 10 '16 at 02:10

HTMLNoob

821
7
14

What for js chaos ia that?! Edit: see js added to my answer. – seahorsepip Jan 10 '16 at 02:17
This is a pure javascript solution with jquery. – HTMLNoob Jan 10 '16 at 02:28
srry didnt notice our answer – HTMLNoob Jan 10 '16 at 02:29

On hover of div a change the color of div b

3 Answers3