CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Laurence Fass
Laurence Fass

Reputation: 1942

unexpected jquery event behaviour from within contained div

I am seeing unexpected behaviour on a small HTML widget ive recently created. Three successively embedded divs each one has a marker and a menu which show up on entry into the div and hide on exit. The marker is intended to track the vertical mouse position. Problem here is that the mouseover event fires only when the mouse is over the marker and not when the mouse over the containing div.

http://jsfiddle.net/laurencefass/f47a7a2r/

$( ".outer, .inner, .middle" )
   .mouseenter(function(e) {
       $(this).children(".content:first").show();
  $(this).parents().children(".content:first").hide();

       $(this).children(".marker:first").show();
       $(this).parents().children(".marker:first").hide();
   })
   .mouseleave(function(e) {
       $(this).children(".content:first").hide();
       $(this).parents().children(".content:first").show();

       $(this).children(".marker:first").hide();
       $(this).parents().children(".marker:first").show();
   })
   .mouseover(function(e) {
    $(".content", $(this)).html("left = " + e.pageX + " right = " + e.pageY);
    var marker = $(this).children(".marker");
   marker.offset({top:e.pageY - marker.height()/2, right:0});});
.outer, .middle, .inner {
    font-size:0.8em;
    position:absolute;
    border:5px solid black;
    background-color:lightgray;
    text-align:center;
}

.outer {
    top:10%;
    left:10%;
    width:80%;
    height:500%;
}

.middle {
    top:5%;
    left:20%;
    width:60%;
    height:60%;
}

.inner {
    top:5%;
    left:30%;
    width:40%;
    height:60%;
}

.content {
    background-color:aliceblue;
    min-height:2em;
    min-width:50px;
    display:none;
}

.marker {
    height:50px;
    width:5em;
    background-color:black;
    position:absolute;
    right:0px;
    margin-right:2px;
    display:none;
    color:white;
    fontsize:0.8em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="outer">
    <div class="content">outer menu</div>
    <div class="marker">widget</div>
    <div class="middle">
        <div class="content">middle menu</div>
       <div class="marker">widget</div>
        <div class="inner">
            <div class="content">inner menu</div>
            <div class="marker">widget</div>
        </div>
    </div>
</div>

Upvotes: 0

Views: 93

Answers (2)

oshell
oshell

Reputation: 9123

This can be done much easier just using CSS. You can use this functionallity for your widgets too.

.outer:hover>.content,
.middle:hover>.content,
.inner:hover>.content{
    display: block;
}

Then you can strip out your mouseenter and mouseleave

$( ".outer, .inner, .middle" )
   .mouseover(function(e) {
       var marker = $(this).children(".marker");
       marker.offset({top:e.pageY - marker.height()/2, right:0});
});

JSFiddle

If you only want to show the widget of the element hovered you have to use jQuery, Furthermore you would probably use mosemove() event to have it at the mouse position all the time.

$( ".outer, .inner, .middle" ).mousemove(function(e) {
    e.stopPropagation();
    var marker = $(this).children(".marker");
    marker.eq(0).show();
    marker.offset({top:e.pageY - marker.height()/2, right:0});
});

$( ".inner, .middle" ).mouseenter(function(e) {
    if($('.marker', $(this).parent()).eq(0).length){
       $('.marker', $(this).parent()).eq(0).hide();
    }
});

$( ".outer, .inner, .middle" ).mouseleave(function(e) {
    if($('.marker', $(this).eq(0)).length){
       $('.marker', $(this).eq(0)).hide();
    }
});

JSFiddle

Upvotes: 4

Laurence Fass
Laurence Fass

Reputation: 1942

my expectation: a rhs "floating" widget to track the vertical position of the mouse and be visible only as long as the cursor is within scope of the marker's container.

Upvotes: 0

Related Questions