À 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

vous ne Pouvez pas reproduire. Mais pour ce genre de choses vous devez généralement utiliser les CSS de toute façon, peut-être nous montrer plus de code?
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