简体   繁体   中英

Share buttons on hover

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM