Hover on one element to affect the div before it not after it

Question

I want to make a <div b on hover to affect <div> a. I have seen code for the reverse using (+)

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

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

But is there away to affect the opposite? Div B affecting Div A rather then A affecting B?

Sorry it got messed up. To clarify I want to make a div b on hover to affect div a. I have seen code for the reverse using (+) — Michael, Mar 19 '14 at 16:45
In pure CSS, you can't. You could do some sort of hack using `:before` but that's rarely much of a consolation. JS is the only sure-fire way of achieving this. — Mitya, Mar 19 '14 at 16:47
No just two div's next to each other. I have link and span with an arrow. I want the arrow to move when you hover over the link (which it does) but I would also like when you hover over the arrow to have the link color change as it does when you hover. — Michael, Mar 19 '14 at 16:47
@HashemQolami sorry, we must have been editing at the same time. It happens. — Mitya, Mar 19 '14 at 16:48
Similar [issue here](http://stackoverflow.com/questions/22510960/cant-change-background-color-of-another-element-on-hover/) which needs a *granduncle* selector :) — Hashem Qolami, Mar 19 '14 at 16:57
CSS tricks can fake it , http://codepen.io/anon/pen/vtsnC/ not to use really :) — G-Cyrillus, Mar 19 '14 at 17:01

EnigmaRM · Answer 1 · 2014-03-19T17:50:38.480

2

As has been mentioned, this isn't feasible as a CSS solution at this point in technology. You'd need to rely on Javascript.

Here is a jQuery solution for you:

$('#b').hover(
    function(){ $('#a').addClass('yellow') },
    function(){ $('#a').removeClass('yellow') }
)

edited Mar 19 '14 at 17:50

answered Mar 19 '14 at 17:45

EnigmaRM

Thanks for this, but for some reason I cannot get it to work. Maybe because I am using a div class? This was close when I added a border element, but color did not work $(document).ready(function () { $(".research_arrow").hover(function () { $(".research_link").css("color:#000000"); }); $(".research_arrow").mouseleave(function () { $(".research_link").css("color:#ffffff"); }); }); – Michael Mar 19 '14 at 17:57

score 1 · Answer 2 · answered Mar 19 '14 at 17:00

1

Selectors Level 4 draft defines the subject of a selector, which allows you to use

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

However, AFAIK browsers don't support it yet.

And also note it's a feature of the complete Selectors profile, so it isn't extremely performance sensitive.

answered Mar 19 '14 at 17:00

Oriol

2 Answers2