php hover,hover不起作用怎么办

当CSS中的:hover选择器不起作用时,可能的原因包括:1)在选择器前有空格,2)类名错误,3):hover定义位置不当。解决方法是删除空格,修正类名,并确保:hover在:link和:visited之后。了解这些常见问题有助于优化CSS代码,确保鼠标悬停效果正常工作。
摘要由CSDN通过智能技术生成

hover不起作用的解决办法:1、检查并删除“:hover”前的空格;2、检查并修改正确的类名;3、检查“:hover”是否被置于“:link”和“:visited”之前,修改位置即可。

6d1ed1198ddcbe136ab2f002bae20773.png

本教程操作环境:windows7系统、HTML5&&CSS3版,DELL G3电脑。

css中hover不起作用的几种原因:

1.在设置:hover前加空格:

比如

.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;

}

测试

你发现鼠标经过class为one的时候背景不变,而经过one里面的其他div背景颜色发生变化,

说明:hover前加空格,本身不会有:hover的效果,而后代元素会有:hover的效果。

【推荐学习:css视频教程】

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

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

3.类名写错了;

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

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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值