Question

我试图让这个工作，但我不知道为什么它不会，是否有一种方法来解决这个问题，即看错误

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

我把它放在这里：

<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

要使其正常工作，.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>

在div上显示无/块无效

4 个答案: