Here’s a cool CSS technique that we can use to give a hover effect to a group of divs, and then an additional effect to the element being hovered on!
Twitter uses this effect with their sharing links on a tweet. When you hover over an individual tweet, the reply, retweet and favorite links appear, like this:
But then when you place your cursor over one of the links, it becomes underlined, while the others remain revealed, but not underlined, like this:
In this example we’ll create the same effect. We’ll use divs that will not be visible until we hover over the parent div, and then we’ll underline each div once it is hovered on.
Here’s our HTML:
<section class="parent">
<p>Section text would go here</p>
<div class="child">Share</div>
<div class="child">Like</div>
<div class="child">Tweet</div>
</section>And our CSS looks like this:
.parent {
width: 400px;
height: 100px;
background: #fff;
border: 2px solid #000;
margin: 10px;
}
.child {
opacity: 0;
color: #000;
margin-left: 10px;
float: right;
}
.child:hover {
opacity: 1.0;
text-decoration: underline;
cursor: pointer;
}
.parent:hover > .child {
opacity: 1.0;
}Check out a live (editable) demo here: DEMO
Feel free to ask any questions in the comments below!
