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

Answer 2

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

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