Html 在另一个div悬停时显示div，而不具有相同的父div

不确定这是否可行，但如果另一个不共享同一父级的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>

---

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

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

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

$（文档）.ready（函数（）{
$（“.hover me”）.hover（函数（）{
$（“.hover content”）.show（）；
}，函数（）{
$（“.hover content”）.hide（）；
});
});

如果您不想使用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属性。

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

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

---

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

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

$（文档）.ready（函数（）{
$（“.hover me”）.mouseenter（函数（）{
$（“.hover content”）.show（）；
}).mouseout（函数（）{
/*当鼠标离开div时，你想要什么*/
} ); 
}); 

这不应该起作用。一般同级组合符（

~

）不起作用，除非这两个元素是同级元素（共享同一个父元素），OP说不是这种情况。我认为测试和悬停内容是彼此的同级元素OP说“另一个div不共享同一个父元素”。所以他们不是兄弟姐妹。这个答案是不正确的。由于“hover me”div至少有一个子元素，因此当鼠标移动到子元素上时，可能无法为此div触发

mouseenter

mouseenter

不会向父对象弹出气泡，如果样式正确，则鼠标有可能进入子对象而不经过父对象。使用

鼠标悬停

或

鼠标悬停

——就像我在前面的回答中所做的那样！

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