CODEWITHSUNDEEP
jquerycss
methuselah
methuselah

Reputation: 13206

Cannot hover on dynamically generated div element

I am currently dynamically generating the row and col-xs-6 col-sm-4 inside the #locations-content div element.

<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>

I am trying to get image to fade on hover, but it doesn't appear to be working. Is there something wrong with my code:

$('#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);  
});

Upvotes: 0

Views: 266

Answers (1)

robert_hamm
robert_hamm

Reputation: 176

I believe you need to use mouseenter instead of hover 

$('#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);
});

Upvotes: 2

Related Questions