javascript - img1 をホバーしたときにテキストを表示 - img2 をホバーしたときにのみ非表示

Question

次のようなものがあります：

<div id="Oobj51">
    <script type='text/javascript'>
        $(function() {
            $('#Oobj51').hover(function() {
                $("#Oobj58").show(500);
            }), 
            $("#Oobj58").hover(function() {
                //do nothing if hovered over
            }, 
            function(){
                //hide on hover out
                $("#Oobj58").hide(500);
            });
        });
    </script>
    <button type="submit" class="przed"  onmouseover="this.className='po'"                            onmouseout="this.className='przed'"/>
</div>

次に、「Oobj51」のような 7 つの画像があり、それぞれに「Oobj58」の場合はフォームの一部があります。ホバーアウトしたときではなく、フォーム「Oobj59」の次の部分が表示される次の画像「Oobj52」にホバーしたときに、Oobj58 を非表示にする方法.??

Answer 1

まず、すべての div に同じクラス名を付けます。

<div class="Oobj" id="Oobj51">

次に、ホバーした div の ID を使用して、次に何をするかを定義します。

$(function() {
   $('.Oobj').hover(function() {
        var currentId = $(this).attr('id');
        if(currentId == 'Oobj51') {
            $("#Oobj58").show();
            $("#Oobj59").hide();
        } else if(currentId == 'Oobj52') {
            $("#Oobj58").hide();
            $("#Oobj59").show();
        }
    });
});