Question

我有一个有多个子div的父div。父div在鼠标悬停时有一个悬停事件，它在dom上显示一些文本。儿童div也具有相同的功能。

我尝试过mouseover / mouseout和mouseleave等，但它们并不适合我的使用。

当您将鼠标悬停在父级上时，消息＆＃34; foo＆＃34;在dom中显露出来当您将鼠标悬停在孩子上时，消息＆＃34; bar＆＃34;在dom中显露出来当您将鼠标悬停回父级而不离开父级时，不会显示任何消息。在这一点上，我希望将其重置为具有与最初相同的功能。

最好的方法是什么？因为我不想重新安排dom，因为它非常耗费时间

由于

Answer 1

这是一个猜测，但这（或类似的东西）可能会像你描述的那样。

$(function(){
    var disabled = false;
    var theMessage = $("#theMessage");
    $("#theParent").on("mouseover",function(e){
        if(e.target.id == "theChild"){
            theMessage.text("bar");
            disabled=true;
        } else if(!disabled) {
            theMessage.text("foo");
        }
    }).on("mouseout",function(e){
       if(e.target.id == "theParent"){
           disabled=false;;
       }
        theMessage.text("...")
    });
});

#theParent {width:200px; height:200px; background:red; position:relative;}
#theChild {position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; width:100px; height:100px; background:blue;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="theMessage">...</div>
<div id="theParent">
    <div id="theChild"></div>
</div>

V2：

$(function(){
    var disabled = false;
    var theMessage = $("#theMessage");
    $("#theParent").on("mouseover",function(e){
        if(e.target.id == "theChild"){
            theMessage.text("bar");
        } else {
            theMessage.text("foo");
        }
    }).on("mouseout",function(e){
       if(e.target.id == "theParent"){
           disabled=false;
           theMessage.text("...");
       }
    });
});

#theParent {width:200px; height:200px; background:red; position:relative;}
#theChild {position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; width:100px; height:100px; background:blue;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="theMessage">...</div>
<div id="theParent">
    <div id="theChild"></div>
</div>

v3：使用data-attribute存储悬停文字：

$(function(){
    var theMessage = $("#theMessage");
    var defaultTxt = theMessage.text();
    $("#theParent, #theChild").on("mouseover",function(e){
        e.stopPropagation();
        theMessage.text($(this).data("txt"));
    });
    $("#theParent").on("mouseout",function(){
         theMessage.text(defaultTxt);
    });    
});

#theParent {width:200px; height:200px; background:red; position:relative;}
#theChild {position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; width:100px; height:100px; background:blue;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="theMessage">...</div>
<div id="theParent" data-txt="foo">
    <div id="theChild" data-txt="bar"></div>
</div>

Answer 2

http://jsfiddle.net/vnzunp5w/16/

e.preventDefault();
e.stopPropagation();

似乎是赢家！

Answer 3

我必须这样做才能让箭头最初隐藏，而不是仅在悬停时显示它们。使用此滑块http://www.idangero.us/swiper/#.Vk4so7erTRY （到目前为止我找到的最好的一个）

$('.swiper-button-next, .swiper-button-prev').addClass('hide');
    var hoverArrows = function(){
        console.log("hoverArrows")
        $('.swiper-wrapper, .swiper-button-next, .swiper-button-prev').mouseenter(function () {
            console.log("hovered")
            $('.swiper-button-next, .swiper-button-prev').removeClass('hide');
        }).mouseleave(function () {
           $('.swiper-button-next, .swiper-button-prev').addClass('hide');
        });
    }
    hoverArrows();

jQuery - Mouseenter / Mouseleave父/子问题

3 个答案: