Hover element changes other element

Question

I am practicing my css using the hover when I notice this problem when I hover on top the color will change to blue and the middle will change to color red but when I hover to middle the middle changes the color to red but the top remains.

I tried to add a !important to the middle:hover but it didn't work. I also remove the + sign but i think it will not work since it should be on the same div for that to work.

why does the hover not working for the top div when middle div is hovered?

HTML

<div class="top">
    <p> HELLO WORLD </p>
</div>

<div class="middle">
    <p> HELLO PEOPLE </p>
</div>

CSS

.top:hover + .middle {
    color:red;
}

.top:hover {
    color:blue;
}

.middle:hover {
    color:red;
}

.middle:hover + .top {
    color: blue;
}

FIDDLE HERE

You can't do this in CSS unfortunately. You will need javascript. — dfsq, Nov 18 '14 at 07:58
`.middle:hover + .top` means `.top` element **after** .middle, not before. — dfsq, Nov 18 '14 at 07:59
Adjacent sibling selectors have the following syntax: E1 + E2, where E2 is the subject of the selector. The selector matches if E1 and E2 share the same parent in the document tree and E1 immediately precedes E2, ignoring non-element nodes (such as text nodes and comments). — brandelizer, Nov 18 '14 at 08:00
`+` selects the element (matching the second part of the selector, after `+`) that immediately follows the element matching the first part and is a sibling (not a child). Refer the [specification](http://www.w3.org/TR/CSS21/selector.html) here. [Sample Fiddle](http://jsfiddle.net/0z008fLy/1/) where `.middle:hover + .top` will work. — Harry, Nov 18 '14 at 08:00
@SureshPonnukalai http://stackoverflow.com/questions/11507481/css-hover-on-other-element is this what you need? — MIke, Nov 18 '14 at 08:01
@MichaelPon Check the link what you have given to me. They trying to access the next element not previous element. `+` is next immediate sibling element. — Suresh Ponnukalai, Nov 18 '14 at 08:04
I think that doesn't make any sense. removing that will not make what I want. @Kayani — MIke, Nov 24 '14 at 03:24

score 0 · Answer 1 · answered Nov 18 '14 at 08:59

0

You cannot select a parent element in CSS unfortunately. But JavaScript can be used to resolve this problem.

Check out this for more info on selectors...http://www.w3.org/TR/CSS21/selector.html

answered Nov 18 '14 at 08:59

Mudassir

1,136
1
11
29

score 0 · Answer 2 · answered Nov 18 '14 at 09:18

The CSS + selector is the next sibling selector. It doesn't work on previous siblings, similar to how you can't target a parent from a child. This is because CSS works Top-Bottom, (ie parent > child, next sibling etc) and not vice versa.

This article explains why CSS doesn't have a parent selector but same logic applies for the lack of previous sibling selectors.

tldr: Bottom-Up CSS selectors are not feasible because of their performance implications in browsers.

Hover element changes other element

2 Answers2