html - 悬停时在另一个 div 中显示 div

Question

我有两个 div；一个在另一个里面。我想在悬停在外部 div 上时显示内部 div，否则应该隐藏内部 div。外部 div 中也有一个始终显示的图像（内部 div 的兄弟），因此当将鼠标悬停在图像上时，它也会显示文本。有人能帮我吗？

<script>
 $(".divone").hover(
    function () {
       $(".divtwo").css("visibility","visible");
    },
    function () {
       $(".divtwo").css("visibility","hidden");
    }
 );
</script>


<div class="divone">
   <div class="divtwo">some text here</div>
   <img src="images/test.png" />
</div>


.divtwo{
    background-color:red;
    top:120px;
    height:50px;
    width:223px;
    position:absolute;
    visibility: hidden;
}

.divone{
     height:169px;
 position:relative;
}

Answer 1

你也可以有这样的风格：

.divone:hover .divtwo {
   visibility: visible;
}

不需要 JS。

Answer 2

您可以像这样将事件附加到 mouseenter 和 mouseleave 事件。

$(".divone").mouseenter(function () {
   $(".divtwo").css("visibility","visible");
});

$(".divone").mouseleave(function () {
   $(".divtwo").css("visibility","hidden");
});