À Réagir, onMouseEnter ou passez la souris ne fonctionne pas comme prévu
J'ai une image avec opacity = 1
au début.
Lorsque la souris entre dans l'image, changer opacity = 0.5
. Lorsque la souris sort de l'image, modifier l'opacité de retour.
voici un code:
mouseEnter() {
console.log('mouse enter')
const classname = '.' + this.props.post.code
document.querySelector(classname).classList.add('image-hover-opacity')
}
mouseLeave() {
console.log('mouse leave')
const classname = '.' + this.props.post.code
document.querySelector(classname).classList.remove('image-hover-opacity')
}
render() {
<img src={src} onMouseEnter={::this.mouseEnter} onMouseLeave={::this.mouseLeave} />
}
onMouseEnter et onMouseLeave sont déclenchés lorsque la souris entre et sort de l'image, respectivement, de la bonne. Mais le problème est que quand je bouge la souris à l'intérieur de l'image, à la fois onMouseEnter et onMouseLeave sont licenciés.
Et j'ai essayé css solution ainsi, quand j'ai passez la souris sur l'image, modifier l'opacité de la propriété. Mais le problème est le même: quand je bouge la souris à l'intérieur de l'image, :hover, et non stationnaire sont déclenché plusieurs fois.
Comment résoudre ce problème? grâce
Mise à JOUR
Il y a quelque chose dans mon code précédent. Créé un jsfiddle, et il fonctionne.
désolé les gars
Pourquoi ne pas utiliser les CSS
:hover{ opaclty:0.5 }
?J'ai essayé le css. Mais quand je bouge la souris à l'intérieur de l'image, l'opacité permet de basculer entre 0,5 et 1
J'ai mis à jour l'exemple, il fonctionne.
OriginalL'auteur Benjamin Li | 2017-01-30
Vous devez vous connecter pour publier un commentaire.
À l'aide de
document.querySelector
n'est pas un très Réagissent de façon de penser. Vous pouvez essayer cette approche:div
emballage ceimg
pour éviter cette étrange mouseEnter comportementUtilisation
this.state
avec l'opacitéOriginalL'auteur Robsonsjre