I've been trying to make the share buttons to appear when hovering on an article "Mashable style" but I can't seem to get it right. Any help will be appreciated.
<div class="c-container">
<article class="c-news">
<header>
<a href="#">
<img src="http://a_really_long_url.jpg"
alt="post-image" class="post-image">
</a>
</header>
look at jsFiddle
You need to use the :hover
CSS selector:
First hide the elements:
.st_facebook_hcount, .st_twitter_hcount { position:relative; display:none; /* Hide It*/ width:6rem; top: -1.2rem; left:18rem; }
Then set the :hover
to show:
.c-news:hover .st_facebook_hcount, .c-news:hover .st_twitter_hcount { display:inline-block; }
The demo http://jsfiddle.net/nJRtm/6/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.