您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

为什么有时候使用css中hover属性会没有反应?(示例)

2025/4/7 22:59:50发布37次查看
当我们在使用css中hover时,偶尔会遇到无效的情况,这个真是让人很焦急。那么到底是什么原因导致失效的呢?本篇文章就给大家总结一下css中hover失效的原因。
css中hover的用法具体代码示例如下:
<style type="text/css"> .one { margin: 0 auto; width: 400px; height: 300px; background: #ced05d; } .two { margin: 0 auto; width: 100px; height: 100px; background: #5a5aea; } .three { margin: 0 auto; width: 200px; height: 100px; background: #4b9c49; } .four { margin: 0 auto; width: 300px; height: 100px; background: #7b4141; } .one :hover { background: #da56d0; }</style><body><h1>css中hover的用法测试</h1><div class="one"> <div class="two"> </div> <div class="three"> </div> <div class="four"> </div></div></body>
无效原因总结:
一、上述代码测试时发现鼠标经过class为one的时候背景不变,而经过one里面的其他div背景颜色发生变化,说明了:hover前加空格,本身不会有:hover的效果,而后代元素会有:hover的效果。
二、只有后代元素和兄弟元素(紧接在元素后的兄弟元素)才有效果,其他的:hover会失效
三、类名错误;
四、:hover 被置于 :link 和 :visited 之前也是无效的;
注:
:hover 选择器用于选择鼠标指针浮动在上面的元素。提示::hover 选择器可用于所有元素,不只是链接。
提示::link 选择器设置指向未被访问页面的链接的样式,:visited 选择器用于设置指向已被访问的页面的链接,:active 选择器用于活动链接。在 css 定义中,:hover 必须位于 :link 和 :visited 之后(如果存在的话),这样样式才能生效。
以上就是为什么有时候使用css中hover属性会没有反应?(示例)的详细内容。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product