css - 在 div 上显示无/ block 不起作用

Question

我正在努力让它工作，但我无法弄清楚为什么它不会，有没有办法解决这个问题，即查看错误

我想要实现的是当我将鼠标悬停在 stat1 div 上时在 showhim div 中显示信息，但它没有发生。

我把它放在这里:

http://jsfiddle.net/ksvrY/39/

<div id="post-wrap">
   <div class="showhim" id="stat1_text">
        This is some example test<br />
        This is another line<br />
        And another one<br />
        And a final one
  </div>


    <div id="stat1" class="stat1">
        <a href="#">Hover over this div</a>
    </div>
</div>

.showhim
{
    display: none;
    margin-bottom: 30px;
}

.stat1:hover .showhim
{
    display: block;
}

Answer 1

编辑:正如 Paul 所指出的，您可以使用兄弟选择器。所以在这种情况下实际上有一种方法可以用纯 css 来做到这一点

.stat1 不是 .showhim 的父级。

您可以使用javascript。所以像(使用 jQuery):

$('.stat1').mouseover(function(){
  $('.showhim').show();
}).mouseout(function(){
  $('.showhim').hide();
});

参见 http://jsfiddle.net/ksvrY/50/