I have one image with opacity = 1 at the beginning.
When mouse enters the image, change opacity = 0.5. When mouse leaves the image, change the opacity back.
here is one 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 and onMouseLeave are fired when mouse enters and leaves the image, respectively, good. But the problem is when I move the mouse inside the image, both onMouseEnter and onMouseLeave are fired.
And I have tried css solution as well, when I hover on image, change the opacity property. But the problem is the same: when I move mouse inside the image, :hover and not hover are fired multiple times.
How to solve this? thanks
UPDATE There is something in my previous code. Created one jsfiddle, and it works. sorry guys
Using document.querySelector is not a very React way of thinking. You can try this approach:
div wrapping this img to avoid this weird mouseEnter behaviorUse this.state with opacity
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>
}
I really think you can achieve this in CSS only.
So your component should have simple className property and that class should have the definitions for:
.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>