猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

css样式不出现在该出现的位置?

1.鼠标移入时候样式显示了,控制台和Element也显示,但是Element显示的和页面中该出现的现象不一致,求解
代码如下

https://img1.mukewang.com/5c3c41b80001687709710948.jpg

慕妹3242003
浏览 574回答 1
1回答

智慧大石

因为你的.boder li的整个定位都不对，也不应该通过display属性去控制，因为display: none的元素是不占据文档空间的。其实想要实现类似效果。。纯css足以。补充：css3的版本，比较粗糙。<!DOCTYPE html><html><head>&nbsp; &nbsp; <meta charset="UTF-8">&nbsp; &nbsp; <title></title>&nbsp; &nbsp; <style type="text/css">&nbsp; &nbsp; &nbsp; &nbsp; ul,li{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; list-style: none;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .top{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; z-index: 1;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .top li{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: relative;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 20px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 80px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 0 10px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-bottom: 2px solid darkgray;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .top li:hover {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: yellowgreen;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-bottom: 2px solid yellowgreen;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .top li:hover::before {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: block;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: red;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .top li:before {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: block;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; content: ' ';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; z-index: -1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 80px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 26px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top: -20px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transition: top 500ms linear;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </style></head><body>&nbsp; &nbsp; <ul class="top">&nbsp; &nbsp; &nbsp; &nbsp; <li>Airline</li>&nbsp; &nbsp; &nbsp; &nbsp; <li>Schedule</li>&nbsp; &nbsp; &nbsp; &nbsp; <li>Deals</li>&nbsp; &nbsp; &nbsp; &nbsp; <li>Arinks</li>&nbsp; &nbsp; &nbsp; &nbsp; <li>Settings</li>&nbsp; &nbsp; </ul></body></html>jquery虽然动画库比较方便易用，但是现在css3动画在很多方面都更加优秀一点(除了IE兼容性以外)。
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript