React中hover悬浮菜单的做法

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

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

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'},来控制

React中hover悬浮菜单的做法相关推荐

android全局悬浮菜单,安卓悬浮菜单全解锁
安卓悬浮菜单全解锁是一款十分好用的安卓桌面快捷操作整理工具,这款软件可以让你手机拥有一个和iPhone一样的手势悬浮球,一键打开各种应用以及操作,需要的小伙伴赶紧来下载这款安卓悬浮菜单全解锁吧~ 软件 ...
android 菜单工具,悬浮菜单-手机菜单工具
悬浮菜单是一款手机功能辅助菜单工具,它会增加一个悬浮在手机桌面上的便捷菜单,而且可以任意展开和缩进,让你能够更加方便地操作手机.同时它还支持自定义菜单,让它能够更加符合你的个人习惯,非常方便.如果你觉 ...
WPF开发的实用小工具 - 快捷悬浮菜单
WPF开发的实用小工具 - 快捷悬浮菜单 ❝ 本文由网友投稿,Dotnet9站长整理.站长觉得这小工具很实用,站长家里.公司也在尝试使用了. 行文目录: 这工具有什么用? 正文源码获取及应用下载体验 ...
纯CSS实现带返回顶部右侧悬浮菜单
这是我做个人网页的时候加上的带返回顶部右侧悬浮菜单效果,如下图, 使用工具是Hbuilder. 代码如下: <!DOCTYPE html> <html><head> ...
android 悬浮按钮魅族,魅族，我的悬浮球功能比你的强大：悬浮菜单
Android 上的小圆点应用比比皆是,最近魅族也在 Flyme 4.1 中加入了悬浮球功能.本来对这类应用也是倦了,但想试试无妨.经过几天的使用,感觉悬浮菜单特别就特别在功能非常全面,一个应用就能搞 ...
APP中的悬浮球设计总结
本文为PMCAFF专栏作者836488572出品如果问我过去一段时间最令人印象深刻的交互方式有哪些?我想说的有两个:一个是微信的文章浮窗,在阅读文章时,如果有紧急信息需要处理,可以把文章加入浮窗,想 ...
layui单元格鼠标样式_Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法...
如下所示: var tableIns = window.demoTable = table .render({ elem : '#idTest', id : 'idTest', url : '/par ...
如何在React中做到jQuery-free
前言前些天在订阅的公众号中看到了以前阮一峰老师写过的一篇文章,「如何做到 jQuery-free?」.这篇文章讨论的问题,在今天来看仍不过时,其中的一些点的讨论主要是面向新内核现代浏览器的标准 DO ...
css 菜单栏悬停_在CSS中构建悬停菜单
css 菜单栏悬停 A good menu design is an important part of any website or web app UI. Using only modern HT ...

React中hover悬浮菜单的做法

React中hover悬浮菜单的做法相关推荐

最新文章

热门文章