在div上显示none/block不起作用

Question

我正在努力让它工作，但我不明白为什么它不会，有没有一种方法可以解决这个问题，即查看错误

我试图实现的是，当我将鼠标悬停在stat1div上时，在showhimdiv中显示信息，但这并没有发生。

我把它放在这里：

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/

Answer 2

您可以进行同级选择。

<div id="post-wrap">
<div id="stat1" class="stat1">
    <a href="#">Hover over this div</a>
</div>
 <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>
.showhim
{
  display: none;
  margin-bottom: 30px;
}
.stat1:hover ~ .showhim
{
  display: block;
}

Answer 3

要使其工作，.showhim需要是.stat1的子元素。

Answer 4

同意paul

还有另一个解决方案：

将.showhim移动到#stat1:

<div id="post-wrap">
    <div id="stat1" class="stat1">
        <a href="#">Hover over this div</a>
        <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>
</div>