谈谈react操作onMouseEnter、onMouseLeave结合css里的hover
来源:互联网 发布:尼康d810调焦软件 编辑:程序博客网 时间:2024/06/05 07:59
react对于每个html元素都添加了很多事件处理函数,这些事件网上一搜就都出来了,这里简单说下在react中利用js进行操作类似于css里的hover所使用的事件。
比如这样一个需求,有以下3个div:
<div class="a abc">a</div><div class="b abc">b</div><div class="c abc">c</div>
网上很多例子只是简单说了下一个组件是如何操作类似于:hover选择器,没错就是使用onMouseEnter和onMouseLeave,那么现在我要实现这样一个效果:
1. 鼠标不在这三个div上的时候,这个三个div里的字体显示红色
2. 鼠标放在class为a的组件上的时候,它里面的字体颜色不变,其他的div变成绿色
也许是我以前写前端的时候用习惯了JQuery,处处都是dom操作,现在使用react的时候,一时之间转不过来弯,就好像从面向过程编程过度到面向对象编程一样,我想了一下,想想react改变页面的内容是根据状态,于是我利用onMouseEnter和onMouseLeave事件来动态改变状态hover,然后根据hover的状态值去给这三个div分别添加一个class,这里的class样式在css文本中要写在其他class的下面,因为css是自上而下的。
我的代码如下:
reactjs中的部分代码
construction(props){ super(props); this.state={ hover: false, } this.onMouseEnter = this.onMouseEnter.bind(this); this.onMouseLeave = this.onMouseLeave.bind(this);}onMouseEnter(){ this.setState({ hover: true, });}onMouseLeave(){ this.setState({ hover: false, })}render(){ return <div> <div className={style.a + ' ' + style.abc + ' ' + (this.state.hover?style.aHover:'')}>a</div> <div className={style.b + ' ' + style.abc + ' ' + (this.state.hover?style.bHover:'')}>b</div> <div className={style.c + ' ' + style.abc + ' ' + (this.state.hover?style.b=cHover:'')}>c</div> </div>;}
css的相关样式
.abc{ //公共的样式 color: red;}.a{}.b{}.c{}//写在其他class的样式表的下面.aHover,.bHover,.cHover{ color: green;}.aHover:hover,.bHover:hover,.cHover:hover{ color: red;}
也许有的人会想到用css中的+选择器,比如:.abc:hover + .abc{},是的,如果只是像这里写的需求的话是可以实现,如果换一下,我鼠标放在b上,b显示红色,其他显示绿色,那么+选择器就无力了,因为css是自上而下,不可逆的,说是+是兄弟级选择器,我看也就是弟弟级选择器,它只能定位到你当前标签后面同级的标签元素。
注:因为是react,所以不建议使用js对dom进行直接操作、利用css的expression
阅读全文
0 0
- 谈谈react操作onMouseEnter、onMouseLeave结合css里的hover
- onmouseover 、onmouseout 与onmouseenter 、onmouseleave的区别
- onmousever onmouseout onmouseenter onmouseleave
- 25、onmouseover 、onmouseout 与onmouseenter 、onmouseleave的区别
- JS事件:onmouseover 、onmouseout 与onmouseenter 、onmouseleave的区别
- onmouseenter 、onmouseover 、onmouseout、onmouseleave区别
- onmouseenter,onmouseleave与onmouseover,onmouseout
- onMouseEnter、onMouseLeave、onMouseOver、onMouseOut冒泡事件
- css中hover的妙用!!
- css的hover不生效
- css Hover的巧用
- 关于onmouseenter的问题
- css中hover伪类的bug
- 按钮hover状态的css实现
- 谈谈CSS的@media
- react与es6的结合
- JQuery结合CSS操作打印样式的方法
- JQuery结合CSS操作打印样式的方法
- 取得request对象中所有的参数值并生成一个相应的对象返回
- C++定义一个时间计时类
- 2017多校5 1011 Rikka with Competition
- OpenGL ES应用开发实践指南(android 卷)笔记 第五章1
- Caffe学习:使用pycaffe读取mean.binaryproto文件参数
- 谈谈react操作onMouseEnter、onMouseLeave结合css里的hover
- Mac 下验证下载文件的 MD5/SHA1/SHA256
- Android开源库整理(2)
- Android开发学习(7)ListView
- CSS3理解position属性
- Java 发送get post请求
- Caffe学习:使用pycaffe读取caffemodel参数
- Python多层异常的捕获
- 工厂模式和抽象工厂模式