CODEWITHSUNDEEP
javascriptjquery
awkwrd
awkwrd

Reputation: 43

jQuery - Mouseenter / Mouseleave Parent / Child Issue

I've got a parent div with multiple child divs. The parent div has a hover event on mouseover where it reveals some text on the dom. The child div's also have the same functionality.

I've tried mouseover/mouseout and mouseleave ect but they are not quite right for my usage.

When you hover over the parent the message "foo" reveals in the dom When you hover over the child the message "bar" reveals in the dom When you hover back to the parent without leaving the parent no message is shown. At this point I'd like it to be reset to have the same functionality as it did originally.

What is the best way to achieve this please? As I don't want to have to rearrange the dom as it'd be very time consuming

Thanks

Upvotes: 0

Views: 1852

Answers (3)

William Howley
William Howley

Reputation: 493

I had to do this in order to have the arrows hide initially, and than show them on hover only. Using this slider http://www.idangero.us/swiper/#.Vk4so7erTRY (best one I have found so far)

$('.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();

Upvotes: 0

Moob
Moob

Reputation: 16184

It's a guess but this (or something similar) might do as you describe. 

$(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: Use the data-attribute to store the hover text:

$(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>

Upvotes: 2

awkwrd
awkwrd

Reputation: 43

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

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

seems to be the winner!

Upvotes: 0

Related Questions