懸停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事件（doc http://api.jquery.com/mouseenter/ ）

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