React中hover悬浮菜单的做法

落日映苍穹つ 2022-06-01 04:08 748阅读 0赞

对于悬浮菜单，主要是借助html标签的事件机制，或者hover来实现，先看下效果图：

![20180119092338649][]

当鼠标放在名字上时，弹出菜单，离开时，菜单消失。

1.先说下利用事件机制做法：

在事件机制中，主要利用鼠标的一些事件来监听，具体如下：

可以利用onMouseOver（鼠标进入），onMouseLeave （鼠标离开）来监听鼠标的变化

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

同时 需在样式中设置父类及子类的position值，父类值为 relative，子类值为 absolute，同时为使悬浮菜单在最前端显示，菜单的css中需加入 z-index:999;（数值越大，越靠前端，999最大值）

.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;
    }

2.如果通过hover判断，需在css中加入 父类：hover .子类\{\} ，这个样式，然后在其中通过控制display来控制显示与否，

如父组件样式名为A，子组件样式名为B即需这样写： A:hover .B\{display:'block'\},来控制

[20180119092338649]: /images/20220601/96de239627cc417bbc7bad45cdf14abb.png