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
CSS Variables Don't Work in Microsoft Edge
How to Build a String in a Loop for a Dynamic Gradient
Responsive Google Maps V3 - Cannot Get 100% Height
Change the CSS of the Qna Bot Embedded as Webchat
Unicode Character for "X" Cancel/Close
Which Letter of the English Alphabet Takes Up Most Pixels
How a CSS Pixel Size Is Calculated
Differencebetween the Selectors ".Class.Class" and ".Class .Class"
Twitter Bootstrap Scrollable Modal
How to Make the New Long Shadow Trend with CSS
Vertically Rotate Text Inside an HTML Table Header Cell
Instagram New Logo CSS Background
Is It Bad to Work with Pixels in CSS
Removing the Blue Glow from an HTML Text Input When Selected