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 disaapear不是在徘徊时，而是悬停在下一个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();
        }
    });
});

Answer 2

您可以查看mouseenter事件（doc http://api.jquery.com/mouseenter/）

$("#Oobj51").mouseenter(function() 
{
  $("#Oobj58").show();
})
$("#Oobj51").mouseleave(function() 
{
  $("#Oobj58").hide();
});

悬停img1时显示的文字 - 仅在悬停img2时隐藏

2 个答案: