关于hover失效的问题
昨天在写静态网页的过程中发现有时候hover会不起作用,后面去查阅了资料,总结大概有以下原因:
一、 :hover前加了空格或使用了中文冒号
css
.abc{margin: 10px 20px 30px 40px;padding: 40px 30px 20px 10px;width: 50px;height: 60px;position: relative;display: inline-block;background-color: blue;
}
.def{margin: 10px 20px 30px 40px;padding: 40px 30px 20px 10px;width: 50px;height: 60px;position: absolute;top: 0;left: 0;display: none;background-color: skyblue;
}
.abc:hover .def{display: inline-block;
}
.ghi{background-color: #fff;width: 50px;height: 60px;
}
html
<div style="background-color: purple;display: inline-block;"><div class="abc"><div class="ghi"></div><!-- 只是为了显示出盒子内容 --><div class="def"></div></div></div>
这是一串正确的代码,作用是当鼠标移动到abc时会显示出def。
但是如果将
.abc:hover .def{display: inline-block;}
改为.abc :hover .def{display: inline-block;}
的话,该hover便会失去作用。
二、 active,visited,hover,link之间的关系
active < hover < visitied / link
其意思就是active需定义在hover之后才能起作用,而hover需定义在visited和link之后才会起作用。当然,前提是它们同时存在的时候。
三、hover只会与子代元素元素及兄弟元素起作用
最开始使用hover属性的时候发现它只作用于它的子代元素,并且自带设置属性(style、class、id)的子代元素不受hover的影响。在做作业的过程中,会发现元素a会作用于自己不想要产生变化的元素,在这称为元素b,刚开始第一个想法就是将b与a分隔开,进而与a成为了兄弟元素,但有想要a:hover单独作用于b,这时发现代码a:hover .b{}
失去了效果,通过查询资料了解到,当想要hover作用于兄弟元素时,代码会发生相应的变化,我们需要在b前加上+号,即a:hover +.b{}
。但后面的过程又发现,这个方法并不是对所有的兄弟元素都适用,通过了解得知,hover作用的兄弟元素,仅仅只是对相邻的兄弟元素有用。
.abc{margin: 10px 20px 30px 40px;padding: 40px 30px 20px 10px;width: 50px;height: 60px;position: relative;display: inline-block;background-color: blue;
}
.def{margin: 10px 20px 30px 40px;padding: 40px 30px 20px 10px;width: 50px;height: 60px;position: absolute;top: 0;left: 0;display: none;background-color: skyblue;
}
.jkl{margin: 10px 20px 30px 40px;padding: 40px 30px 20px 10px;width: 50px;height: 60px;position: absolute;top: 0;left: 0;display: none;background-color: skyblue;
}
.mno{margin: 10px 20px 30px 40px;padding: 40px 30px 20px 10px;width: 50px;height: 60px;position: absolute;top: 60;left: 70;display: none;background-color: skyblue;
}
.abc:hover .def{display: inline-block;
}
.abc:hover +.jkl{display: inline-block;
}
.abc:hover +.mmo{display: inline-block;
}.ghi{background-color: #fff;width: 50px;height: 60px;
}
html
<div style="background-color: purple;display: inline-block;"><div class="abc"><div class="ghi"></div><!-- 只是为了显示出盒子内容 --><div class="def"></div></div><div class="jkl"><div class="ghi"></div><!-- 只是为了显示出盒子内容 --></div><div class="mno"><div class="ghi"></div><!-- 只是为了显示出盒子内容 --></div></div>
发现当鼠标移向abc时,只会显示出def,jkl两个盒子,可以看出对mno是没有作用了,当然即使你加上++也是没有用的!
四、低级错误什么的啦啦啦啦
还没有发现别的原因,先写到这里吧!
关于hover失效的问题相关推荐
- 关于选择器权重导致的a:hover 失效问题
文章目录 引言 练习 css选择器优先级 案例引用出处 引言 我在网上看视频自学前端,做到css选择器的一个小练习时遇到了一些问题,把它记录下来,如果你有此问题的朋友可以看看,希望能帮到大家! 我在写 ...
- html中hover无法触发,如何让css hover 失效
让css hover失效的原因:1.在CSS定义中,"a:hover"没有被置于"a:link"和"a:visited"之后:2.在CSS定 ...
- html中hover无法触发,CSS hover失效的原因总结
8种机械键盘轴体对比 本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 最近碰到了一个设置h标签的hover失效问题,找了些资料,趁此机会做个总结 在 CSS 定义中,它们同时存在的时候,a: ...
- css 点击(onMouseDown和onMouseUp)后,hover失效
希望结果 正常情况蓝色,悬停时浅蓝,onMouseDown时深蓝,onMouseUp时蓝色 最初代码 <style> #div{background:蓝色; } #div:hover{ba ...
- 关于hover失效问题(!important)
在如下代码中,利用JS更改div的高宽后,导致内部a标签hover效果失效: <!doctype html> <html> <head> <meta char ...
- JQuery利用css()修改样式后 hover失效的解决办法
执行完代码后发现写在样式表中的hover效果失效,改了好几遍差点重新写函数,后来发现很简单,是优先级的问题,css()中的内容覆盖了之前的样式 只需要在样式后写!important即可解决! 1 .f ...
- css hover失效的解决方法
在开发vue项目时,element-plus按钮的focus样式不是我想要的,然后就想覆盖它的样式,但是发现元素hover效果失效,我的写法是这样的: .close-pop-btn{position: ...
- Qt cef3 无边框程序最小化之后,再打开 hover 状态失效
1. 使用qt + cef3 开发的 pc 桌面程序出现一个奇怪的问题,描述如下: 1. 程序最小化之后,再最大化,所有Qt 按钮的hover状态都失效. 2. hover 失效后的程序,showNo ...
- CSS a:hover伪类在IE6下的问题
就拿对伪类:hover的支持来说,IE7+终于添加了对a以外其它标签的支持.对于这样的改进,当然是要拍手称快的,但在IE6下,:hover就连对a的支持都不是那么的尽如人意.下面就是我想简单说的一个关 ...
最新文章
- 2021年大数据ELK(七):安装Elasticsearch-head插件
- idea自动生成类注释和方法注释
- relu不可微为什么可用于深度学习
- 苹果电脑通过密钥对的方式登录linux系统
- 数据预处理--样本选择、交叉验证
- MySQL之如何删除重复数据只保留一条
- [WCF权限控制]利用WCF自定义授权模式提供当前Principal[实例篇]
- qdir安装 多窗口资源管理软件
- 部分基于layui的时间函数
- dell服务器t330进入不了系统,Re: 戴尔T330服务器故障
- javascript 连续滚动
- manjaro linux 使用Xorg显示服务器
- 【转】网站挂马和端口抓鸡经验总结
- SwitchHost无法切换环境
- MacOS 下 Safari、Chrome 等浏览器 无法打开知到(智慧树)等网页解决方案
- IDEA 断点出现 no executable code found at line
- python培训抖音广告骗局
- PS CC2017安装及破解
- 怎么删除微信的手机充值服务器,微信如何一键清空账单?全部删除的方法
- 电脑为何连不上手机开的热点
热门文章
- 用div层来实现页面半透明遮罩效果
- oracle orm sql,求推荐 ORM 得支持oracle sqlserver切换
- 8个深度学习中常用的激活函数
- webdriver 鼠标操作
- Server SAN:云计算时代的弄潮儿
- MSSQL 2005
- axis2异常:File quot;/axis2-web/listSingleService.jspquot; not found 的处理
- 弹性盒子模型中`display:flex`布局下`white-space:nowrap`失效问题
- JavaScript Let
- 期末课程设计——基于Python+MySQL数据库的学生管理系统(附源代码)