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>

然后我有 7 张图像，例如“Oobj51”，在本例中，每张图像都有一部分形式为“Oobj58”。 如何使 Oobj58 不在悬停时消失，而是在悬停在下一个 img“Oobj52”上时消失，其中表单“Oobj59”的下一部分应该出现。？？

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();
        }
    });
});