CSS :Hover on Other Element

How to affect other elements when one element is hovered

If the cube is directly inside the container:

#container:hover > #cube { background-color: yellow; }

If cube is next to (after containers closing tag) the container:

#container:hover + #cube { background-color: yellow; }

If the cube is somewhere inside the container:

#container:hover #cube { background-color: yellow; }

If the cube is a sibling of the container:

#container:hover ~ #cube { background-color: yellow; }

CSS :hover on other element?

You need to have .a:hover + .b instead of .a:hover .b

.a:hover .b would work for a structure like

<div class="a">AAAA
<div class ="b">BBBB</div>
</div>

If at some point you'll need to have some elements between .a and .b, then you'll need to use .a:hover ~ .b, which works for all siblings of .a coming after it, not just the next one.

Demo http://jsfiddle.net/thebabydino/EajKf/

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

Yes, you can do that, but only if #b is after #a in the HTML.

If #b comes immediately after #a: http://jsfiddle.net/u7tYE/

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

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

That's using the adjacent sibling combinator (+).

If there are other elements between #a and #b, you can use this: http://jsfiddle.net/u7tYE/1/

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

That's using the general sibling combinator (~).

Both + and ~ work in all modern browsers and IE7+

If #b is a descendant of #a, you can simply use #a:hover #b.

ALTERNATIVE: You can use pure CSS to do this by positioning the second element before the first. The first div is first in markup, but positioned to the right or below the second. It will work as if it were a previous sibling.

CSS hover does not affect on other element

A space is a descendant combinator. It targets descendants, but the div is not a descendant of the button, it is a sibling.

You need to use the adjacent sibling combinator instead: a plus sign.

You also need to target the links (which are descendants of .dropcontent so you should use a descendant combinator there) since it is those which you have set display: none on and not the div.

.dropbutton:hover + .dropcontent a {

CSS Hover Will Not Work When Selecting Another Element

The H1 is not a child of the span it's a sibling so you need the sibling combinator + https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator

span:hover {
background-color: red;
color: white;
}
span:hover + h1 {
color: blue;
}
<span>HOVER</span>
<h1>test</h1>


Related Topics



Leave a reply



Submit