无法悬停在动态生成的div元素上

Question

我目前在动态生成#locations-content div元素中的row和col-xs-6 col-sm-4。

<div id="locations-content"> 
    <div class="row"> 
     <div class="col-xs-6 col-sm-4"><img class="img-thumbnail" src="assets/img/boston.jpg" id="Boston-img-popup"></div> 
    </div> 
</div> 

我想让图像淡入淡出，但它似乎没有工作。是不是有什么错我的代码：

$('#locations-content').on('hover', '.row > .col-xs-6.col-sm-4', function(event){ 
    $(this).find('img').fadeTo('slow', 0.4); 
    $(this).find('img').fadeTo('slow', 1); 
}); 

Answer 1

我相信你需要使用的mouseenter代替悬停

$('#locations-content').on('mouseenter', '.row > .col-xs-6.col-sm-4', function(event){ 
    $(this).find('img').fadeTo('slow', 0.4); 
    $(this).find('img').fadeTo('slow', 1); 
});