悬停 IMG1 时显示文本 - 仅悬停在 IMG2 上时隐藏

text show when hover img1 - hide only when hover img2

本文关键字：悬停 隐藏 IMG2 IMG1 显示 文本      更新时间：2023-09-26

有这样的东西： 

<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"的下一部分应该出现。？？

首先给每个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();
        }
    });
});

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

$("#Oobj51").mouseenter(function() 
{
  $("#Oobj58").show();
})
$("#Oobj51").mouseleave(function() 
{
  $("#Oobj58").hide();
});
相关文章：