CODEWITHSUNDEEP
jquery
3gwebtrain
3gwebtrain

Reputation: 15303

jquery bubbling issue

i am doing a slide show. and the slide show contain a image. while the user over on the image, a span (which contain a link) should display. as well if the user move out from the image, the span need to hide.

This works fine. the issue is, while mouseenter the span shows. but i need to click on the link inside the span. while i move to that link, i am getting issue, the link get shakeings. i believe this is because of onmouseenter event. any one can tell me how to avoid this issue?

i used the preventDefatul even stop stopPropagation, but there is no use.

this is my code for jquery :

$(document).ready(function(){

$('span', '.case-study-slider').hide();

$('.case-study-slider img').bind('mouseenter', function(e){
   $(e.target).siblings('span').show();
   e.stopPropagation();
})
$('.case-study-slider img').bind('mouseleave', function(e){
    $(e.target).siblings('span').hide();
    e.stopPropagation();
})

});

And here is my HTML code :

<div class="case-study-slider">  
   <span class="slider-player">  
       <a href="case-study-page-a.html"></a>
   </span>  
   <img height="270" width="702" alt="slider" src="images/slide-space-holder-type2.jpg" /></div>

the span slider-player absolute positioned on the image.

what i need is : while user enter into image, my span need to show, and they can click on link to move my slide without any shake on link.

Any one can help me?

Upvotes: 0

Views: 188

Answers (1)

Massimo
Massimo

Reputation: 573

the trouble is on the container, you have to put your image and the span.slider-player in the same div (as it as), but bind the event to the container.. so

$(document).ready(function(){
   $('span', '.case-study-slider').hide();
   $('.case-study-slider').bind('mouseenter', function(e){
      //$(e.target).siblings('span').show();
      $(this).children('span').show();
      e.stopPropagation();
   });
   $('.case-study-slider').bind('mouseleave', function(e){
      //$(e.target).siblings('span').hide();
      $(this).children('span').hide();
      e.stopPropagation();
   })
});

But I prefer this method :P

$(document).ready(function(){
   $('span', '.case-study-slider').hide();
   $('.case-study-slider').hover({
      function() {
         $(this).children('.slider-player').show();
      },
      function() {
         $(this).children('.slider-player').hide();
      }
   });
});

with this methods you don0t need stopPropagation

I tought it helps

@modify: I forgot to change selectors inside the events, and added my preferred solution :)

Upvotes: 2

Related Questions