What I want to do is when a certain div
is hovered, it'd affect the properties of another div
.
For example, in this JSFiddle demo, when you hover over #cube
it changes the background-color
but what I want is that when I hover over #container
, #cube
is affected.
div { outline: 1px solid red; } #container { width: 200px; height: 30px; } #cube { width: 30px; height: 100%; background-color: red; } #cube:hover { width: 30px; height: 100%; background-color: blue; }
<div id="container"> <div id="cube"> </div> </div>
To display div element using CSS on hover a tag: First, set the div element invisible i.e display:none;. By using the adjacent sibling selector and hover on a tag to display the div element.
You can simply use the CSS background-image property in combination with the :hover pseudo-class to replace or change the image on mouseover.
To remove the CSS hover effect from a specific element, you can set the pointer-events property of the element (the hover behavior of which you want to disable) to “none”.
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; }
In this particular example, you can use:
#container:hover #cube { background-color: yellow; }
This example only works since cube
is a child of container
. For more complicated scenarios, you'd need to use different CSS, or use JavaScript.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With