sur un élément en mouvement ne déclenche pas les événements de la souris

une info-bulle s'affichera lorsque la souris sur un div mobile, mais, la div est en mouvement, il ne déclenche pas les événements de souris, voir le problème: firefox 23.0. 1 est ok). `sur un élément en mouvement ne déclenche pas les événements de la souris

$('.area').on('mouseenter',function(){ 
    $('.tooltip').show(); 
}).on('mouseleave',function(){ 
    $('.tooltip').hide(); 
}); 
var offset = 10; 
setInterval(function(){ 
    //$('.area').hide(); 
    $('.area').css({"-webkit-transform":"translate("+offset+"px,"+offset+"px)"}); 
    //$('.area').css({"left":offset+'px',"top":offset+'px'}); 
    offset += 10; 
},1000);

pardonnent mon pauvre anglais.

Source

2013-09-05 David-CodingSerf

$('.area').on('mouseenter',function(){ 
    $('.tooltip').show(); 
}).on('mousemove', function(e){ 
    $('.tooltip').css({'top':e.pageY,'left':e.pageX, 'z-index':'1'}); 
}).on('mouseleave',function(){ 
    $('.tooltip').hide(); 
}); 

var offset = 10; 
setInterval(function(){ 
    //$('.area').hide(); 
    $('.area').css({"-webkit-transform":"translate("+offset+"px,"+offset+"px)","-moz-transform":"translate("+offset+"px,"+offset+"px)"}); 
    //$('.area').css({"left":offset+'px',"top":offset+'px'}); 
    offset += 10; 
},1000);

Cocher cette ligne "$ ('zone') css ({ "- webkit transformée": "traduire (" + offset + "px" + offset + "px)"," - moz- transformer ":" translate ("+ offset +" px, "+ offset +" px) "}); //$('(area').css({"left":offset+'px',"top":offset+ 'px'}); " Est-ce comme tu veux? vérifier le violon JSFiddle

Source

2013-09-05 06:50:20

Vous devez utiliser mot « -moz- » si vous utilisez CSS3 pour les navigateurs moz. Firefox est -moz- navigateur. C'est pourquoi cela n'a pas fonctionné pour Firefox. Si vous utilisez css3 IE, vous utilisez le mot "-ms-". –

oh, désolé. Je veux dire, quand votre souris sur le .area et ne déplacez pas la souris (votre main peut être laissée), alors .area se déplace toujours jusqu'à la souris statique, mais à ce moment, l'événement mouseleave ne se déclenche pas , l'info-bulle est toujours affichée, je voudrais faire disparaître l'info-bulle en ce moment –

http://jsfiddle.net/Aveendra/jcezG/23/ vérifier ce violon? –

pouvez-vous s'il vous plaît remplacer votre code avec cette

et ensemble gauche et en haut postion au moment de la mouseover

$('.area').on('mouseenter',function(){ 
    $('.tooltip').show(); 
}).on('mousemove', function(e){ 
    $('.tooltip').css({'top':e.pageY,'left':e.pageX}); 
}).on('mouseleave',function(){ 
    $('.tooltip').hide(); 
});

et définir z-index: 100; dans infobulle classe

Demo

Source

2013-09-05 06:55:12

vous devez utiliser la position div ainsi que la position du pointeur de la souris et le feu même effet sur mouseenter et mousemove pour obtenir la dernière position du pointeur de la souris.

var x,y; 

$('.area').on('mouseenter mousemove',function(e){ 
    //console.log(e.pageX + "|" + e.pageY); 
    x= e.pageX; 
    y=e.pageY; 
    $('.tooltip').css({'top':e.pageY,'left':e.pageX + 15, 'z-index':'1'}).show(); 
}).on('mouseleave',function(){ 
    $('.tooltip').hide(); 
});

Cocher cette fiddle pour plus de détails

Source

2013-09-05 07:39:50

oui, merci, mais je pense toujours que c'est un bug de navigateur. le navigateur devrait le traiter, pas moi –

quel est le problème maintenant. –

en fait, le déplacement div est aléatoire –

sur un élément en mouvement ne déclenche pas les événements de la souris

Répondre

Questions connexes