CSS for Twitter-Like Hover Effects

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:

Twitter Links

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:

Twitter Links Hover

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>

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!

A web and application developer, based in Chicago, IL. Founder of Dragon Fruit Development (www.dragonfruitdevelopment.com) More articles by Todd Dunham
Home CSS Deals DesignBombs HTML HTML5 JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress