鼠标悬停功能不适用于Jquery中的图像组

Question

我有4张图像构成的保护图像，这些图像是对角线的。通过调整，我创建了保护图像。并且，我标记了每个图像的边框。见下文。

我需要鼠标悬停保护器中每个图像的功能。

我的HTML

<div class="pieContainer">

     <div class="pieBackground"></div>
     <div id="pieSlice1" class="hold"><div class="pie"><img src="images/intro_pie.png"/></div></div>
     <div id="pieSlice2" class="hold"><div class="pie"><img src="images/cutomerengagement_pie.png"/></div></div>
     <div id="pieSlice3" class="hold"><div class="pie"><img src="images/customerinsights_pie.png"/></div></div>
     <div id="pieSlice4" class="hold"><div class="pie"><img src="images/itsolutions_pie.png"/></div></div> 

     <div class="piecenteric">
     <img src="images/wheelbase.png"/>
     <div class="traingle"><span class="alert">Click Here</span></div>
     <div class="traingleSec" style="display: none"></div>
     <div class="traingleThir" style="display: none"></div>
     <div class="traingleFour" style="display: none"></div></div>

</div>

我的CSS

div.pieContainer {
margin-top: auto;
position: relative;
margin-left: auto;
margin-right: auto;
width: 750px;
}

#pieSlice1 div.pie {
position: relative;
margin-top: 180px;

}


#pieSlice2 div.pie {
position: relative;
margin-left: 92px;
    position: relative;
    top: -347px;
}

#pieSlice3 div.pie {
margin-left: 329px;
    position: relative;
    top: -695px;
}

#pieSlice4 div.pie {
 margin-left: 328px;
    position: relative;
    top: -941px;
}

div.piecenteric {
 left: 64px;
    position: relative;
    top: -1215px;
}

div.piecenteric div.traingle {
    position: relative;
    width: 0px;
    height: 0px;
    border: solid 45px;
    border-color: transparent transparent #fff transparent;
    transform: translate(27px, -197px) rotate(-67deg);
    -moz-transform: translate(-10px, -229px) rotate(-67deg);
    margin-left: 10px;
    top:10px;
}

div.piecenteric div.traingle span.alert {
 display: inline-block;
    font-size: 12px;
    line-height: 9px;
    margin-left: -15px;
    margin-top: 17px;
}

div.piecenteric div.traingleSec {
    width: 0px;
    height: 0px;
    border: solid 25px;
    border-color: transparent transparent #fff transparent;
    transform: translate(162px, -361px) rotate(-21deg);
}

div.piecenteric div.traingleThir {
    width: 0px;
    height: 0px;
    border: solid 25px;
    border-color: transparent transparent #fff transparent;
    transform: translate(325px, -410px) rotate(21deg);
} 
 div.piecenteric div.traingleFour {
    width: 0px;
    height: 0px;
    border: solid 25px;
    border-color: transparent transparent #fff transparent;
    transform: translate(445px, -348px) rotate(64deg);
} 

我的目标是我需要在每张图片中执行鼠标悬停功能。

我的jquery

$("#pieSlice1 div.pie img, #pieSlice2 div.pie img, #pieSlice3 div.pie img, #pieSlice4 div.pie img").mouseover(function(){
console.log($(this).parent().parent().attr("id"));

});

我的结果仅适用于＆＃39; pieSlice1＆＃39;。但是，我需要获得所有图像。

请帮忙吗？

Answer 1

尝试使用事件委派方法on：

$(".pie img").on('mouseover', function(){
    console.log($(this).parent().parent().attr("id"));
});

出于测试目的，使用click代替mouseover可能会更容易，因此您的控制台不会如此迅速地受到污染。