javascript - 悬停时共享按钮

Question

我一直在尝试让共享按钮在鼠标悬停在文章“Mashable style”上时出现，但我似乎做不好。任何帮助将不胜感激。

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

看jsFiddle

Answer 1

您需要使用 :hover CSS 选择器:

• 首先隐藏元素:

  .st_facebook_hcount, .st_twitter_hcount {
    position:relative;
    display:none; /* Hide It*/
    width:6rem;
    top: -1.2rem;
    left:18rem;
  }
  

• 然后设置:hover显示:

  .c-news:hover .st_facebook_hcount, .c-news:hover .st_twitter_hcount {
    display:inline-block;
  }
  

演示 http://jsfiddle.net/nJRtm/6/