悬停时分享按钮

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/