Я пытаюсь создать простой веб-сайт для практики React и Dom, но на простом onMouseOver и onMouseLeave у меня начинаются проблемы.Все, что я хочу - это скрыть другие буквы имени с помощью div при наведении курсора на букву, которая вернется в исходное состояние при выходе из режима наведения.
Мне удалось добиться эффекта, отображая только разные divкогда относительная буква активна в состоянии, но выглядит так, как будто она дает мерцающий эффект и неожиданное поведение.Я не знаю, происходит ли это потому, что это повторный рендеринг и, следовательно, он теряет указатель мыши.Есть ли у вас какие-либо предложения и объяснения?
Вот кодекс с практикой https://codepen.io/anon/pen/JQLvQp
//example of a letter in css//
.L{
display: flex;
justify-content: space-between;
font-size: 6rem;
align-items: flex-start;
height: 50vh;
transform: translate(0rem, -15rem);
width: 90%;
margin: 0 auto;
cursor: pointer;
}
#L1 {
background-color: orangered;
height: 9rem;
flex: 1;
animation: fadein1;
animation-duration: 2s;
}
#L2 {
height: 0;
flex: 1;
}
#L3 {
background-color: orangered;
height: 9rem;
flex: 5;
animation: fadein5;
animation-duration: 2s;
}
@keyframes fadein1{
0%{flex: 0}
100%{flex: 1 }
}
@keyframes fadein5{
0%{flex: 0}
100%{flex: 5 }
}
// here's the actual code //
import './App.css';
import React, { Component } from 'react';
class Home extends Component {
constructor(props) {
super(props)
this.funzionina = () => {
console.log("casa")
}
this.state = {
A: false,
L: false,
E: false,
S: false,
SS: false,
I: false,
O: false,
}
}
render() {
return (
<div className="papa" >
<div className="App">
<div onMouseOver={() => { this.state.A === false ? this.setState({ A: true }) : console.log("Casa") }} onMouseLeave={() => this.setState({ A: false })}><h2> A</h2></div>
<div onMouseOver={() => this.setState({ L: true })} onMouseLeave={() => this.setState({ L: false })}><h2> L</h2></div>
<div onMouseOver={() => this.setState({ E: true })} onMouseLeave={() => this.setState({ E: false })}><h2> E</h2></div>
<div onMouseOver={() => this.setState({ S: true })} onMouseLeave={() => this.setState({ S: false })}><h2> S</h2></div>
<div onMouseOver={() => this.setState({ SS: true })} onMouseLeave={() => this.setState({ SS: false })}><h2> S</h2></div>
<div onMouseOver={() => this.setState({ I: true })} onMouseLeave={() => this.setState({ I: false })}><h2> I</h2></div>
<div onMouseOver={() => this.setState({ O: true })} onMouseLeave={() => this.setState({ O: false })}><h2> O</h2></div>
</div>
{this.state.A && <div className="A"> <div id="A1"> </div> <div id="A2"> </div> <div id="A3"> </div> </div>}
{this.state.L && <div className="L"> <div id="L1"> </div> <div id="L2"> </div> <div id="L3"> </div> </div>}
{this.state.E && <div className="E"> <div id="E1"> </div> <div id="E2"> </div> <div id="E3"> </div> </div>}
{this.state.S && <div className="S"> <div id="S1"> </div> <div id="S2"> </div> <div id="S3"> </div> </div>}
{this.state.SS && <div className="SS"> <div id="SS1"> </div> <div id="SS2"> </div> <div id="SS3"> </div> </div>}
{this.state.I && <div className="I"> <div id="I1"> </div> <div id="I2"> </div> <div id="I3"> </div> </div>}
{this.state.O && <div className="O"> <div id="O1"> </div> <div id="O2"> </div> <div id="O3"> </div> </div>}
</div >
)
}
}
export default Home;