Tengo una imagen con opacity = 1 al principio.
Cuando el mouse ingrese a la imagen, cambie la opacity = 0.5 . Cuando el mouse abandone la imagen, vuelva a cambiar la opacidad.
aquí hay un código:
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 y onMouseLeave se disparan cuando el mouse entra y sale de la imagen, respectivamente, bien. Pero el problema es que cuando muevo el mouse dentro de la imagen, tanto onMouseEnter como onMouseLeave se disparan.
Y también probé la solución css, cuando paso el mouse sobre la imagen, cambio la propiedad de opacidad. Pero el problema es el mismo: cuando muevo el mouse dentro de la imagen, :hover y not hover se activan varias veces.
¿Cómo resolver esto? Gracias
ACTUALIZAR Hay algo en mi código anterior. Creó un jsfiddle y funciona. lo siento chicos
Usar document.querySelector no es una forma de pensar muy React. Puedes probar este enfoque:
div que envuelva este img para evitar este extraño comportamiento de mouseEnter Use this.state con opacidad
constructor() { this.state = { opacity: 1 } } mouseEnter() { console.log('mouse enter') this.setState({opacity: 0.5}) } mouseLeave() { console.log('mouse leave') this.setState({opacity: 1}) } render() { <div style={{opacity: this.state.opacity}}> <img src={src} onMouseEnter={::this.mouseEnter} onMouseLeave={::this.mouseLeave} /> </div> }Realmente creo que puedes lograr esto solo en CSS. Entonces, su componente debe tener una propiedad className simple y esa clase debe tener las definiciones para:
.image-hover-opacity:hover { opacity: 0.5; } class Example extends React.Component { constructor() { super(); this.state = {}; } render() { return( <img className="image-hover-opacity" src="http://i.imgur.com/PLKabDV.png" /> ); } } ReactDOM.render(<Example />, document.getElementById('root')); .image-hover-opacity:hover { opacity: 0.5; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>