Question

我希望在子元素 .menuitems 悬停时执行一些操作。目前，我已使用提示替换了操作，以简化操作。现在的问题是，当我使用选择器（“ #result_row .menuitems ”）时，没有任何作用。但是，如果我使用（“ #result_row ”），它可以正常工作，即警报有效。

为什么会这样？它应该适用于两种情况？我希望悬停在儿童和孙子（.menu1）上工作。

这是我的代码：

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");
    });
});

注意：此代码无法呈现，因为它缺少许多其他样式，父元素等。所以我用截图来描述问题。

红色矩形是 .result_row 。绿色是孩子， .menuitems 。

修改如果你想知道别的东西，这里是：当我使用.menuitems：悬停在CSS（不是jQuery）时，悬停工作。

EDIT2：

在回答时，对您来说还有一件重要的事情是：打开主页面（网站）时，不会加载您在此图像中显示的“EMAIL”窗口。它仅在我单击页面上的按钮时加载，并且您在第2行和第3行中看到的内容随着它一起加载，即它们不是静态的！

Answer 1

我输入了jsfiddle中的所有内容并且它有效（点击F12查看console.log）

https://jsfiddle.net/bLjmocza/

我也替换了

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

与

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

因为这似乎是你在第一时间想要实现的目标

Answer 2

使用此代码：

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

Answer 3

您的CSS中的问题是<h1>OUR PORTFOLIO</h1><div class="subtext-top">CLIENT-FOCUSED MEDIA PRODUCTION</div><div class="line-dark1"></div> </div> </div></div><div class="row"> <div class="sixteen columns wpb_column column_container" > <div class="wpb_wrapper "> <div class="clear"></div> <div class="container"> <div class="sixteen columns"> <div id="portfolio-filter"> <ul id="filter"> <li><a href="#" class="current" data-filter="*" title=""></a></li><li><a href="#" data-filter=".photography" title="">PHOTOGRAPHY</a></li><li><a href="#" data-filter=".video-production" title="">VIDEO PRODUCTION</a></li></ul> </div> </div> </div> <ul class="portfolio-wrap isotope"> <li class="portfolio-box video-production "> <a class="vimeo" href="https://vimeo.com/169312968&autoplay=true" title="iLiveAccountable"> <img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/ilive-1-31nfbcra0szpkeu8rwwxz4.jpg" alt="" /> <div class="mask"></div> <div class="line-folio"></div> <div class="line-folio1"></div> <h4>iLiveAccountable</h4> </a> </li> <li class="portfolio-box "> <a class="youtube" href="https://www.youtube.com/watch?v=Fg7iiQ0XGGI&autoplay=1" title="SKRE Extreme Mountain Gear"> <img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/SK-31fqrlv4u0io2bmbt3zfgg.jpg" alt="" /> <div class="mask"></div> <div class="line-folio"></div> <div class="line-folio1"></div> <h4>SKRE Extreme Mountain Gear</h4> </a> </li> <li class="portfolio-box photography"> <a class="gallery" rel="gallery1" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/SKRE-9-30sp4bav1hxsgwj54nvaww.jpg" title="Concealment"> <img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/SKRE-9-30sp4baun93pvbri4pf1ts.jpg" alt="" /> <div class="mask"></div> <div class="line-folio"></div> <div class="line-folio1"></div> <h4>Concealment</h4> </a> </li> <li class="portfolio-box video-production " style="width:338px"> <a class="youtube" href="https://www.youtube.com/watch?v=hdxU95byX9E&feature=youtu.be&autoplay=1" title="Why Gold? Why Now?"> <img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/ok-30qtm6hhkfhai4j2g294ao.jpg" alt="" /> <div class="mask"></div> <div class="line-folio"></div> <div class="line-folio1"></div> <h4>Why Gold? Why Now?</h4> </a> </li> <li class="portfolio-box photography" style="width:339px"> <a class="gallery2" rel="gallery2" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/img11-30nswp3smpn5synh64xzwg.jpg" title="Random Photography"> <img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/img11-30nswp3s8gt37dvu66hqtc.jpg" alt="" /> <div class="mask"></div> <div class="line-folio"></div> <div class="line-folio1"></div> <h4>Random Photography</h4> </a> </li> <li class="portfolio-box photography "> <a class="gallery3" rel="gallery3" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/img17-30nswqv4et3spn3ok9j6dc.jpg" title="Sports Photography"> <img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/img17-30nswqv40k9q42c1kb2xa8.jpg" alt="" /> <div class="mask"></div> <div class="line-folio"></div> <div class="line-folio1"></div> <h4>Sports Photography</h4> </a> </li> <li class="portfolio-box photography "> <a class="gallery4" rel="gallery4" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/img5-30nswmywbqkyk4ynmesum8.jpg" title="Wedding Photography"> <img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/img5-30nswmyvxhqvyk70mgclj4.jpg" alt="" /> <div class="mask"></div> <div class="line-folio"></div> <div class="line-folio1"></div> <h4>Wedding Photography</h4> </a> </li> <li class="portfolio-box video-production "> <a class="youtube" href="https://www.youtube.com/watch?v=hbEgxfr3rDE&autoplay=1" title="Why Ashcreek Ranch Academy"> <img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/22-30nstcqe466oswsn6bdla8.jpg" alt="" /> <div class="mask"></div> <div class="line-folio"></div> <div class="line-folio1"></div> <h4>Why Ashcreek Ranch Academy</h4> </a> </li><li class="portfolio-box video-production "> <a class="youtube" href="https://www.youtube.com/watch?v=MZ-pxEUw6WU&autoplay=1" title="Gold Puplic Investor Promo"> <img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/21-30nssg6u6e4x0cgueyhrls.jpg" alt="" /> <div class="mask"></div> <div class="line-folio"></div> <div class="line-folio1"></div> <h4>Gold Puplic Investor Promo</h4> </a> </li><li class="portfolio-box video-production "> <a class="youtube" href="https://www.youtube.com/watch?v=jbmRPENVwLw&autoplay=1" title="Ministering Angels"> <img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/19-30nsqgtk87dygshnmxhc00.jpg" alt="" /> <div class="mask"></div> <div class="line-folio"></div> <div class="line-folio1"></div> <h4>Ministering Angels</h4> </a> </li><li class="portfolio-box video-production "> <a class="youtube" href="https://www.youtube.com/watch?v=SsAgvJFGiGA&autoplay=1" title="Amazing Aerial Video Over the West"> <img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/20-30nsrfvkzu3hubqw3m29s0.jpg" alt="" /> <div class="mask"></div> <div class="line-folio"></div> <div class="line-folio1"></div> <h4>Amazing Aerial Video Over the West</h4> </a> </li><li class="portfolio-box video-production "> <a class="youtube" href="https://www.youtube.com/watch?v=So4E51xqQB4&autoplay=1" title="Campaign"> <img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/18-30nmv08fhqj2dmq5iibj7k.jpg" alt="" /> <div class="mask"></div> <div class="line-folio"></div> <div class="line-folio1"></div> <h4>Campaign</h4> </a> </li> <li class="portfolio-box photography" style="width:335px;display:none;"> <a class="gallery" rel="gallery1" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/Mike-Full-Draw-30sp495yqivl82ubkxq5mo.jpg" title="Concealment"> <img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/SKRE-9-30sp4baun93pvbri4pf1ts.jpg" alt="" /> <div class="mask"></div> <div class="line-folio"></div> <div class="line-folio1"></div> <h4>Concealment</h4> </a> </li> <li class="portfolio-box photography" style="width:335px;display:none;"> <a class="gallery2" rel="gallery2" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/img16-30nswq8i7cfutedbmxlwcg.jpg" title="Random Photography"> <img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/img11-30nswp3s8gt37dvu66hqtc.jpg" alt="" /> <div class="mask"></div> <div class="line-folio"></div> <div class="line-folio1"></div> <h4>Random Photography</h4> </a> </li> <li class="portfolio-box photography" style="width:335px;display:none;"> <a class="gallery2" rel="gallery2" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/img13-30nswphd5l8q53w3bqhyps.jpg" title="Random Photography"> <img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/img11-30nswp3s8gt37dvu66hqtc.jpg" alt="" /> <div class="mask"></div> <div class="line-folio"></div> <div class="line-folio1"></div> <h4>Random Photography</h4> </a> </li> <li class="portfolio-box photography" style="width:335px;display:none;"> <a class="gallery2" rel="gallery2" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/img15-30nswpzgirdh9avkv78l4w.jpg" title="Random Photography"> <img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/img9-30nswoh6f8z7wpx48t0pvk.jpg" alt="" /> <div class="mask"></div> <div class="line-folio"></div> <div class="line-folio1"></div> <h4>Random Photography</h4> </a> </li> <li class="portfolio-box photography" style="width:335px;display:none;"> <a class="gallery2" rel="gallery2" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/img8-30nswo84qnwucmfdh2neo0.jpg" title="Random Photography"> <img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/img9-30nswoh6f8z7wpx48t0pvk.jpg" alt="" /> <div class="mask"></div> <div class="line-folio"></div> <div class="line-folio1"></div> <h4>Random Photography</h4> </a> </li> <li class="portfolio-box photography" style="width:335px;display:none;"> <a class="gallery2" rel="gallery2" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/img7-30nswnz322ugsixmpca3gg.jpg" title="Random Photography"> <img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/img9-30nswoh6f8z7wpx48t0pvk.jpg" alt="" /> <div class="mask"></div> <div class="line-folio"></div> <div class="line-folio1"></div> <h4>Random Photography</h4> </a> </li> <li class="portfolio-box photography" style="width:335px;display:none;"> <a class="gallery2" rel="gallery2" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/img6-30nswnlij78wgdp0jqq4n4.jpg" title="Random Photography"> <img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/img9-30nswoh6f8z7wpx48t0pvk.jpg" alt="" /> <div class="mask"></div> <div class="line-folio"></div> <div class="line-folio1"></div> <h4>Random Photography</h4> </a> </li> <li class="portfolio-box photography" style="width:335px;display:none;"> <a class="gallery2" rel="gallery2" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/img4-30nswmgsykg7fxz62y2874.jpg" title="Random Photography"> <img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/img9-30nswoh6f8z7wpx48t0pvk.jpg" alt="" /> <div class="mask"></div> <div class="line-folio"></div> <div class="line-folio1"></div> <h4>Random Photography</h4> </a> </li> <li class="portfolio-box photography" style="width:335px;display:none;"> <a class="gallery2" rel="gallery2" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/img2-30nswlpnwt92rnhxrqyakg.jpg" title="Random Photography"> <img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/img9-30nswoh6f8z7wpx48t0pvk.jpg" alt="" /> <div class="mask"></div> <div class="line-folio"></div> <div class="line-folio1"></div> <h4>Random Photography</h4> </a> </li> <li class="portfolio-box photography" style="width:335px;display:none;"> <a class="gallery2" rel="gallery2" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/img1-30nswl7kjn4bngig8a7o5c.jpg" title="Random Photography"> <img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/img9-30nswoh6f8z7wpx48t0pvk.jpg" alt="" /> <div class="mask"></div> <div class="line-folio"></div> <div class="line-folio1"></div> <h4>Random Photography</h4> </a> </li> <li class="portfolio-box photography" style="width:335px;display:none;"> <a class="gallery2" rel="gallery2" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/img24-30nswsqz173medarc9b0g0.jpg" title="Random Photography"> <img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/img9-30nswoh6f8z7wpx48t0pvk.jpg" alt="" /> <div class="mask"></div> <div class="line-folio"></div> <div class="line-folio1"></div> <h4>Random Photography</h4> </a> </li> <li class="portfolio-box photography" style="width:335px;display:none;"> <a class="gallery2" rel="gallery2" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/img22-30nsws8vo0yva6b9sske0w.jpg" title="Random Photography"> <img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/img9-30nswoh6f8z7wpx48t0pvk.jpg" alt="" /> <div class="mask"></div> <div class="line-folio"></div> <div class="line-folio1"></div> <h4>Random Photography</h4> </a> </li> <li class="portfolio-box photography" style="width:335px;display:none;"> <a class="gallery2" rel="gallery2" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/img20-30nswrm9gkaxdxkwvgn400.jpg" title="Random Photography"> <img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/img9-30nswoh6f8z7wpx48t0pvk.jpg" alt="" /> <div class="mask"></div> <div class="line-folio"></div> <div class="line-folio1"></div> <h4>Random Photography</h4> </a> </li> <li class="portfolio-box photography" style="width:335px;display:none;"> <a class="gallery2" rel="gallery2" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/img19-30nswrd7rz8jtu363q9ssg.jpg" title="Random Photography"> <img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/img9-30nswoh6f8z7wpx48t0pvk.jpg" alt="" /> <div class="mask"></div> <div class="line-folio"></div> <div class="line-folio1"></div> <h4>Random Photography</h4> </a> </li> <li class="portfolio-box photography" style="width:335px;display:none;"> <a class="gallery2" rel="gallery2" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/img18-30nswr463e669qlfbzwhkw.jpg" title="Random Photography"> <img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/img9-30nswoh6f8z7wpx48t0pvk.jpg" alt="" /> <div class="mask"></div> <div class="line-folio"></div> <div class="line-folio1"></div> <h4>Random Photography</h4> </a> </li> <li class="portfolio-box photography" style="width:335px;display:none;"> <a class="gallery2" rel="gallery2" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/img16-30nswq8i7cfutedbmxlwcg.jpg" title="Random Photography"> <img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/img9-30nswoh6f8z7wpx48t0pvk.jpg" alt="" /> <div class="mask"></div> <div class="line-folio"></div> <div class="line-folio1"></div> <h4>Random Photography</h4> </a> </li> <li class="portfolio-box photography" style="width:335px;display:none;"> <a class="gallery3" rel="gallery3" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/img3-30nswm38foun3sqjxci9ds.jpg" title="Sports Photography"> <img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/img17-30nswqv40k9q42c1kb2xa8.jpg" alt="" /> <div class="mask"></div> <div class="line-folio"></div> <div class="line-folio1"></div> <h4>Sports Photography</h4> </a> </li> <li class="portfolio-box photography" style="width:335px;display:none;"> <a class="gallery3" rel="gallery3" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/img21-30nswrvb55day12nn70f7k.jpg" title="Sports Photography"> <img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/img17-30nswqv40k9q42c1kb2xa8.jpg" alt="" /> <div class="mask"></div> <div class="line-folio"></div> <div class="line-folio1"></div> <h4>Sports Photography</h4> </a> </li> <li class="portfolio-box photography" style="width:335px;display:none;"> <a class="gallery4" rel="gallery4" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/img23-30nswsmg6wkfmbjvye4cu8.jpg" title="Wedding Photography"> <img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/img5-30nswmyvxhqvyk70mgclj4.jpg" alt="" /> <div class="mask"></div> <div class="line-folio"></div> <div class="line-folio1"></div> <h4>Wedding Photography</h4> </a> </li> <li class="portfolio-box photography" style="width:335px;display:none;"> <a class="gallery4" rel="gallery4" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/img12-30nswpcubapjd257xvbb40.jpg" title="Wedding Photography"> <img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/img5-30nswmyvxhqvyk70mgclj4.jpg" alt="" /> <div class="mask"></div> <div class="line-folio"></div> <div class="line-folio1"></div> <h4>Wedding Photography</h4> </a> </li> <li class="portfolio-box photography" style="width:335px;display:none;"> <a class="gallery4" rel="gallery4" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/img14-30nswpqeu6b3p7du3gv9xc.jpg" title="Wedding Photography"> <img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/img5-30nswmyvxhqvyk70mgclj4.jpg" alt="" /> <div class="mask"></div> <div class="line-folio"></div> <div class="line-folio1"></div> <h4>Wedding Photography</h4> </a> </li> <li class="portfolio-box photography" style="width:335px;display:none;"> <a class="gallery4" rel="gallery4" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/img10-30nswouqy4ks8v5qeekoow.jpg" title="Wedding Photography"> <img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/img5-30nswmyvxhqvyk70mgclj4.jpg" alt="" /> <div class="mask"></div> <div class="line-folio"></div> <div class="line-folio1"></div> <h4>Wedding Photography</h4> </a> </li> </ul> </div> </div>。请参阅：http://wtfhtmlcss.com/#floats-computed-height。

快速而简单的修复方法是浮动父级。但是最好将clearfix应用于父级。额外的好处是你可以摆脱你的float div。

以下是clearfix选项：

＆＃13;

clear

＆＃13;

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

＆＃13;

.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 */

＆＃13;

Answer 4

更新：这在jQuery 1.9之后无效！

http://api.jquery.com/on/#additional-notes。请改用mouseenter / mouseleave

第二个anser，因为它将绑定处理程序解决为动态元素

当您动态地向页面添加元素时，您要使用jquery的on方法

将gour jquery更改为

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

主要的不同之处在于，它会将resultrow的{{1}}个孩子的hover事件处理程序与现在存在的或稍后添加的menuitems类相匹配。

为什么悬停不是在孩子身上而是在父母身上？

4 个答案: