0302伪类hover使用的一个问题
2017-03-02 21:53
183 查看
关于伪类hover使用时的发现的遇到的一个问题:
hover不可在同级之间使用,也不可跨级使用。需要连续的层级逐级定义。例如:<div class="content-box3">
<div class="img">
<a href="#">
<img src="./images/pic1.jpg" width="100%">
<div class="shadow"></div>
</a>
</div>
</div>
通过CSS定义,上述的代码表示当鼠标在图片img上悬停的时候,shadow出现。
若写成:
.content-box3 img:hover
.shadow{
display:block;
background:rgba(0,0,0,0.5);
}
是无效的,因为img选择器和shadow对应的div在同一层级。正确写法如下:
.content-box3 .img:hover .shadow{
display:block;
background:rgba(0,0,0,0.5);
}
这段代码将hover写在shadow的父级,所以可以有效控制。
此外,若吃class="img"这个DIV不定义样式,外观上不会影响布局。但此时hover没有办法应用。去掉class="img",用一下方式夸级定义是无效的:
.content-box3 div:hover .shadow{
display:block;
background:rgba(0,0,0,0.5);
}
因为此时shadow的父级是空的,没有意义,鼠标悬停无法找到对象。
相关文章推荐
- 使用网上流传的一个数据库连接池在Proxy.newProxyInstance处引起 java.lang.ClassCastException 问题的解决方法
- 使用sourceTree遇到的一个问题
- 使用Android studio转换Jar包时,遇到的一个问题------> Could not find tools.jar.
- jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
- jQuery中对同一个元素使用mouseover和mouseout产生闪烁问题
- grep 使用的一个问题
- 负margin使用注意的一个问题
- 在Android中多进程使用同一个sqlite数据库的问题
- 分享一个连接,python扩展包下载地址分享包括numpy,scipy等,解决了win8系统不能使用这些扩展包的问题!
- 关于struts1.3中使用DispatchAction的一个问题
- 面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候一个一个依次调用就可以了;面向对象是把构成问题事务分解成各个对象,建立对象的目的不是为了完成一个步骤,而是为了描叙某个事物在整个解决问题的步骤中的行为(转)
- spring 4.x 使用dubbo http协议的一个问题
- 使用PLSQL Developer时,“ORA-12154: TNS:无法解析指定的连接标识符”问题的一个解决办法 .
- Access下“是/否”数据类型在使用NHibernate中的一个问题
- 由一个简单示例 引出java继承中父子类成员变量共享问题 以及super的使用
- 只有一个公网IP也可以使用LVS的DR模式!(外带php session粘滞问题解决)
- python socket编程---从使用Python开发一个Socket示例说到开发者的思维和习惯问题
- 关于EnumChildWindows使用中的一个问题
- 使用fckeditor一个怪问题。。。
- 使用Ext.extend进行继承的一个有趣的问题