发表于： 2017-04-18 23:32:17
2 784
今天完成的事：解决了task13（因为用另一种hover伪类问题耽搁了好久），弄伪类选择器的时候总是无法显示要显示的子元素，后来在父元素加了pointer-events: none解决了问题。查了下张鑫旭的资料，pointer-events:none顾名思意，就是鼠标事件拜拜的意思，pointer-events:none的作用不只是禁用链接hover，打开链接等效果，是真实意义上的将onlick事件去掉了。
明天计划完成的事：开始task14，对之前task9出的问题也解决下。
遇到的困难：已解决。
收获：不单单是pointer-events: none，用兄弟选择器也能OK，不过要麻烦点。
这要通过 > 与 + 来控制下个元素，子集元素，下个元素的子集元素的CSS，比如：
-
<html>
-
<body>
-
<style>
-
.a {color : #FFFF00;}
-
.a:hover > #b{color : #FF0000;}
-
.a:hover + #c{color : #00FF00;}
-
.a:hover + #c > #b{color : #0000FF;}
-
</style>
-
<div class=a>元素1
-
<div class=b>元素2</div>
-
</div>
-
<div class=c>元素3
-
<div class=d>元素2</div>
-
</div>
-
</body>
- </html>
也可以通过CSS选择器，可以参考着按照自己的需求改，比如用ID：
相对于兼容性还是兄弟选择器会更好点，pointer-events属于css3的新增加样式，对于IE是不兼容的，所以还是有点尴尬。兄弟选择器的麻烦是你要保持好逻辑，不能在嵌套子元素的时候弄换了，搞混了父子原素和兄弟原素的差别，同时其定位也会麻烦一些。
返回列表
评论