Question

不确定这是否可行，但我正在尝试显示一个div，如果另一个不共享同一父级的div会悬停。 html看起来像这样：

<div class="test">
   <div class="hover-me"><p>Hover</p></div>
</div>

// some other content here

<div class="hover-content">
 <p>hovered content</p>
</div>

我尝试过使用

.test:hover + .hover-content { 
    display: block;
}

但我认为这只有在中间没有其他内容的情况下才有效吗？有什么建议吗？

Answer 1

使用javascript来监听onmouseover事件，或使用jquery来处理一个上的悬停事件并更改另一个的显示属性。使用jquery

<script>
    $(document).ready(function () {
        $(".hover-me").hover(function () {
            $(".hover-content").show();
        }, function() {
            $(".hover-content").hide();
        });
    });
</script>

如果您不想使用jquery，请更改您的html

<div class="test">
   <div class="hover-me"
      onmouseover="document.getElementById('hover-content').style.display = 'block';"
      onmouseout="document.getElementById('hover-content').style.display = 'none';">
   <p>Hover</p></div>
</div>

// some other content here

<div class="hover-content" id="hover-content">
 <p>hovered content</p>
</div>

请注意我在hover-content div中添加了一个id属性。

Answer 2

因此，您希望在悬停测试时显示.hover内容。您可以尝试以下解决方案。如果它不起作用，你必须使用javascript来检查mouseover事件。希望它有所帮助！

 .test:hover ~ .hover-content {
   display: block;
 }

Answer 3

试试这个，我想它会对你有所帮助：

<script>
     $(document).ready(function () { 
          $( ".hover-me" ).mouseenter( function () { 
               $( ".hover-content" ).show();
           }).mouseout(function () {
               /*anything you want when mouse leaves the div*/
           } ); 
       }); 
 </script>

显示div在另一个div的悬停时没有相同的父级

3 个答案: