Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to affect other elements when one element is hovered

Tags:

html

css

hover

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, #cubeis 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>
like image 819
Trufa Avatar asked Dec 21 '10 18:12

Trufa


People also ask

How do you make elements visible on hover?

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.

How do I change the hover effect in HTML?

You can simply use the CSS background-image property in combination with the :hover pseudo-class to replace or change the image on mouseover.

How do I turn off hover element?

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”.


2 Answers

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; } 
like image 69
Mike Avatar answered Oct 14 '22 00:10

Mike


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.

like image 40
Emmett Avatar answered Oct 14 '22 01:10

Emmett