Bagaimana untuk melaksanakan menu terapung sebagai tindak balas

Cara melaksanakan menu terapung dalam tindak balas: 1. Gunakan onMouseOver dan onMouseLeave untuk memantau perubahan tetikus 2. Tetapkan nilai kedudukan kelas induk dan kelas anak dalam gaya 3. Tetapkan nilai kelas induk kepada relatif, dan nilai kelas anak kepada relatif Nilai kelas adalah mutlak, dan "z-index:999;" ditambahkan pada css menu 4. Kawal paparan dengan mengawal paparan.

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 18.0.0, komputer Dell G3.

Bagaimana untuk melaksanakan menu terapung sebagai tindak balas?

Cara menuding menu terapung dalam React

Untuk menu terapung, ia dilaksanakan terutamanya dengan bantuan mekanisme acara tag html atau hover. Mari kita lihat kesannya dahulu. menu akan hilang.

1 Mari kita bincangkan tentang cara menggunakan mekanisme acara:

Dalam mekanisme acara, kami menggunakan beberapa acara tetikus untuk memantau, seperti berikut:

Anda boleh menggunakan onMouseOver (mouse Enter), onMouseLeave (mouse left) untuk memantau perubahan tetikus

Pada masa yang sama, anda perlu menetapkan nilai kedudukan kelas induk dan subkelas dalam gaya nilai kelas induk adalah relatif, dan nilai subkelas adalah mutlak Pada masa yang sama Untuk membuat paparan menu terapung di bahagian hadapan, z-index:999 perlu ditambah pada css menu (semakin besar nilainya. , lebih dekat dengan hujung hadapan, nilai maksimum 999)

2 Jika dinilai dengan hover, Anda perlu menambah kelas induk: subkelas {}, gaya ini pada css dan kemudian kawal paparan atau tidak dengan mengawal paparan.

class UserMenu extends React.Component{
 
    constructor(props){
        super(props),
            this.state={
                modalIsOpen:'none',
                atUserItems:false,
            }
 
        this.contentBtn=this.contentBtn.bind(this),
        this.programBtn=this.programBtn.bind(this),
        this.handleMouseOver = this.handleMouseOver.bind(this);
        this.handleMouseOut = this.handleMouseOut.bind(this);
        this.userCenter = this.userCenter.bind(this);
        this.handleMouseUserOver = this.handleMouseUserOver.bind(this);
 
    }
 
    contentBtn(){
        this.context.router.history.push("/details");
    }
 
    programBtn(){
        this.context.router.history.push("/gui");
    }
 
    handleMouseOver(e){
        this.setState({
            modalIsOpen: 'block',
        })
    }
 
    handleMouseOut(){
 
        this.setState({
           modalIsOpen: 'none',
        })
 
    }
    handleMouseUserOver(e){
        this.setState({
            modalIsOpen: 'block',
        })
    }
 
    userCenter(){
        this.setState({
            modalIsOpen: 'none',
        })
    }
 
    render(){
        const {username} = this.props;
        return(
            <div className={styles.body} >
                <div className={styles.uname}
                     onMouseOver={this.handleMouseOver}
                     onMouseLeave={this.handleMouseOut}
                >{username}</div>
 
                <div className={styles.menus}
                     style={{display:this.state.modalIsOpen}}
                     onMouseOver={this.handleMouseUserOver}
                     onMouseLeave={this.handleMouseOut}
                >
                    <ul className={styles.ul}>
                        <li className={styles.li} onClick={this.userCenter}>个人中心</li>
                        <li className={styles.li} >账号设置</li>
                        <li className={styles.li} >注销</li>
                    </ul>
                </div>
            </div>
        )
    }
 
}
 
UserMenu.contextTypes = {
    router: PropTypes.object.isRequired
};
 
export default UserMenu

Contohnya, gaya komponen induk dinamakan A dan gaya komponen anak dinamakan B. Tulis sahaja seperti ini: A:hover .B{display:' blok'} untuk mengawal

.body{
    position:relative
}
.menus{
    display:none;
    position:absolute;
    right: 0;
    z-index:999;
}
 
.uname{
    color: white;
    margin-left: 5px;
    margin-right: 10px;
    cursor: pointer;
    padding-top: 25px;
    padding-bottom: 20px;
    padding-left: 5px;
}
.uname:hover{
    color: darkorange;
}
.ul{
    width: 120px;
    background-color: #fff;
    padding: 10px;
    border-radius: 8px;
    -webkit-box-shadow: 0 5px 10px 0 rgba(12,40,46,0.20);
    box-shadow: 0 5px 10px 0 rgba(12,40,46,0.20);
}
.li{
    list-style: none;
    height: 40px;
    display: list-item;
    cursor: pointer;
}
.li:hover{
    color: darkorange;
}

Pembelajaran yang disyorkan: "

tutorial video bertindak balas

"

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan menu terapung sebagai tindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!