Why isn't the hover working on child but parent?

Question

I want some action to be performed when the child element .menuitems is hovered. Currently I've replaced the action with an alert to make it simple. Now the problem is that when I use selector (" #result_row .menuitems "), nothing works. But if I use (" #result_row "), it works fine ie, alert works.

Why is it so? It should work in both cases? I want the hover to work on child as well as grandchilds (.menu1).

Here's my code:

HTML

<div id="result_row"><div class="menuitems">
    <div class="menu1">sfsdsf<span id="srno">4</span></div>
    <div class="menu2">sfsdfs@saf</div>
    <div class="menu3">sdfsdf<span id="cross">X</span></div>
    <div class="clear"></div>
    </div>
</div>

CSS

.menuitems{
    margin-bottom: 5px;
    background: #007fad;
}
.resultmenu > .menuitems{
    background: #004068;
}
.menuitems div{
    background: #00aeef;
    color: white;
    font-family: sans-serif;
    text-align: center;
    font-size: 14px;
    padding-top: 3px;
    padding-bottom: 3px;
    position: relative;
}
.menu1{
    float: left;
    width: 25%;
    margin-right: 2px;
}
.menu2{
    float: left;
    width: 40.4%;
}
.menu3{
    float: right;
    width: 34%;
}
.clear{
    clear: both;
    padding: 0 !important;
}

JavaScript

$(document).ready(function(){
    $("#result_row .menuitems").hover(function(){
        //var tarparent=$(event.target).parent().find("#cross");
        //$(tarparent).toggle();
        alert("Hello");
    });
});

NOTE: This code won't render fine as it is missing many other styles, parent elements etc. So I've put a screenshot to describe the problem.

Red rectangle is .result_row . Green is child, .menuitems .

EDIT: If you want to know something else, here it is: when I use .menuitems:hover in CSS (not jQuery), the hover works.

EDIT2:

One more thing that can be important to you while answering is: The window "EMAIL" you're seing in this image is no loaded when open the main page(site). It is loaded only when I click a button on the page, and the content you're seeing in 2nd and 3rd row are loaded ALONG WITH IT, ie, they're not static!

Answer 1

I entered everything you had into jsfiddle and it worked (hit F12 to see console.log)

https://jsfiddle.net/bLjmocza/

I also replaced

$("#result_row .menuitems").hover(function(){

with

$(".menuitems").hover(function(){

as that seemed to be more what you were trying to achieve in the first place

Answer 2

use this code:

    $(document).ready(function(){
    $("#result_row .menuitems").mouseover(function(){
        alert("Hello");
    });
});

Answer 3

Your problem is float in your CSS. See: http://wtfhtmlcss.com/#floats-computed-height .

The quick and diry fix ist to float the parent. But you are better off applying a clearfix to the parent. The added bonus is you can then get rid of your clear div.

Below is clearfix option:

 $(document).ready(function(){ $("#result_row .menuitems").hover(function(){ //var tarparent=$(event.target).parent().find("#cross"); //$(tarparent).toggle(); alert("Hello"); }); }); 

 .menuitems{ margin-bottom: 5px; background: #007fad; } .resultmenu > .menuitems{ background: #004068; } .menuitems div{ background: #00aeef; color: white; font-family: sans-serif; text-align: center; font-size: 14px; padding-top: 3px; padding-bottom: 3px; position: relative; } .menu1{ float: left; width: 25%; margin-right: 2px; } .menu2{ float: left; width: 40.4%; } .menu3{ float: right; width: 34%; } .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: inline-block; } /* start commented backslash hack \\*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* close commented backslash hack */ 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="result_row"><div class="menuitems clearfix"> <div class="menu1">sfsdsf<span id="srno">4</span></div> <div class="menu2">sfsdfs@saf</div> <div class="menu3">sdfsdf<span id="cross">X</span></div> </div> </div> 

Answer 4

Updated: This won't work in jQuery 1.9 onwards!

http://api.jquery.com/on/#additional-notes . Use mouseenter/mouseleave instead

A second anser as this one addresses binding handlers to dynamic elements

As you are dynamically adding elements to the page you want to use jquery's on method

Change gour jquery to

$(document).ready(function(){
    $("#result_row").on(".menuitems", "hover", function(){
        //var tarparent=$(event.target).parent().find("#cross");
        //$(tarparent).toggle();
        alert("Hello");
    });
});

The main difference is this will attatch the hover event handler any child of resultrow with a class of menuitems that exist now or that are added later.