html - ホバー時に別の div 内に div を表示する

Question

2 つの div があります。もう一方の内側の 1 つ。外側の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");
});