css - 在 div 上显示 none/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

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

.stat1不是 的父级.showhim。

您可以使用 JavaScript。所以像（使用jQuery）：

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

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

Answer 2

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

Answer 3

你可以做一个兄弟选择。

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

同意保罗

这是另一个解决方案：

搬入：.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>