Move your cursor over a specific element to change the div located before it, rather than the one after

Question

Is it possible to have <div> B affect <div> A on hover, instead of the other way around? I've only seen code for the reverse using (+) in CSS.

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

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

I want Div B to be able to change the appearance of Div A when hovered over. Is there a way to achieve this?

Answer 1

Answer №1

It has been stated that using CSS alone is not currently a viable solution in terms of technology. JavaScript would be necessary.

Check out this jQuery solution below:

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

Answer 2

It has been stated that using CSS alone is not currently a viable solution in terms of technology. JavaScript would be necessary.

Check out this jQuery solution below:

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

Answer 3

The draft for Selectors Level 4 introduces the concept of a selector subject, allowing for more specific targeting in CSS.

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

Despite this exciting development, current browsers do not yet support this feature.

It's important to note that this is part of the complete Selectors profile and may not have a significant impact on performance.

Answer 4

The draft for Selectors Level 4 introduces the concept of a selector subject, allowing for more specific targeting in CSS.

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

Despite this exciting development, current browsers do not yet support this feature.

It's important to note that this is part of the complete Selectors profile and may not have a significant impact on performance.