您现在的位置是: 首页 » 网页代码 » css中hover不起作用的原因是什么
网页代码

css中hover不起作用的原因是什么

网站优化小编十一月 3, 2019 6人已围观

在设置CSS的hover时,有时会发现hover不起作用,这是怎么回事?下面网页制作代码教程栏目就来给大家介绍一些CSS中hover不起作用的原因,希望对大家有所帮助。

网站运营中栏目排名优化技巧

1、在设置: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>测试</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的效果。

2、当鼠标经过时,让其他元素改变样式:

这时候你会发现,只有后代元素和兄弟元素(紧接在元素后的兄弟元素)才有效果,其他的:hover会失效

还是上个例子,把

.one :hover {background: #da56d0;}

改为

.one:hover .two {background: #da56d0;}

发现能达到我们想要的效果,改为

.two:hover +.three {background: #da56d0;}

也能达到效果(注意把"+"号去掉,就不能达到效果了)

而改为

.two:hover .four {background: #da56d0;}

不能达到我们的效果(无论带不带加号)

3、类名写错了;

4、:hover 被置于 :link 和 :visited 之前了;

提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。

提示:在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。

文章评论

    发表评论

    电子邮件地址不会被公开。

站点信息
  • 站点运行:197天
  • 网站程序:Wordpress
  • 主题模板:bvseo
  • 文章统计:2450 条
  • 文章评论:5 条
  • 微信公众号:扫描二维码,关注我们