在设置CSS的hover时，有时会发现hover不起作用，总结一下原因：

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

提示：在 CSS 定义中，a:active 必须被置于 a: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 之前了;


http://www.taodudu.cc/news/show-4310887.html

相关文章：

  • css图片按键变手指,CSS-悬停button标签时如何使光标变为手形
  • mvc报错template: “ServletContext resource [/WEB-INF/templates/index.html]“
  • Abaqus二次开发捕获几何元素方法归纳
  • pyspark RDD详细教程
  • Egret的eui的使用
  • egret_eui容器
  • EUI-64生成IPv6地址
  • 网络知识：电脑无线网连接不上问题汇总
  • java $ 怎样用_jsp中$是什么意思?怎么用?
  • javaweb——jsp（jsp的本质是什么、jsp九大内置对象、四个域对象、jsp的主要作用）
  • Web前端——JSP
  • JSP知识点1——什么是JSP？
  • Android Studio 控制台 log不显示解决
  • 关于SearchView的一些小细节
  • 深入理解Java虚拟机小结
  • html设置ios状态栏颜色,ios 显示html标签,超链接颜色以及下划线的处理
  • HTML5的优势，语法变化以及基础常用标签
  • shell程序设计小知识
  • 一个Activity左右分别显示一个ListFragment
  • Powerdesinger使用心得
  • uniapp 引入阿里矢量图标库的详细步骤及踩坑经历
  • WC！咱平时使用的PDF，原来这么不安全？
  • java小白的学习历程
  • 基于 SPI 协议的0.96 寸OLED显示
  • STM32的0.96寸OLED显示屏显示数据
  • 计算机断电无法启动不了系统,电脑突然断电,小编教你电脑突然断电后开不了机怎么办...
  • 有声音显示音频服务器,Win7右下角声音图标显示音频服务未运行的解决方法小结...
  • Rabbitmq交换机详解
  • 炼数成金数据分析课程---13、回归分析
  • 炼数成金数据分析课程---7、数据分析简介

CSS中hover出现不生效的几个原因 ？相关推荐

  1. HTML设置不生效的原因,CSS中hover出现不生效的几个原因 ？

    在设置CSS的hover时,有时会发现hover不起作用,总结一下原因: 提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的. 提示:在 CS ...

  2. html中加hover啥意思,css中hover是什么意思

    css中:hover是一个伪类选择器,:hover伪类选择器在鼠标移到元素上时向此元素添加特殊的样式.:hover选择器适用于所有元素. 要使用css对HTML页面中的元素实现一对一,一对多或者多对一 ...

  3. css中hover的妙用！！

    css 中有个属性为hover.当鼠标放上的时候,将其激活,可以实现类似于js的一些,譬如菜单等功能: 22.html文件: <link rel="stylesheet" t ...

  4. CSS中hover改变其他元素样式

    <!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <m ...

  5. css中hover属性的使用技巧

    hover属性用不同的书写方式,来改变不同关系的元素样式. 元素:hover 表示聚焦后改变自己 元素:hover 元素 表示聚焦后改变其子元素 元素:hover + 元素 表示聚焦后改变其指定的&q ...

  6. css中 Span 元素的 width 属性无效果原因及多种解决方案

    先运行下程序看下: <span style='background-color:#336699;width:300px;'>123</span> 输出:123 可以看到 spa ...

  7. html中hover无法触发,如何让css hover 失效

    让css hover失效的原因:1.在CSS定义中,"a:hover"没有被置于"a:link"和"a:visited"之后:2.在CSS定 ...

  8. html中hover的作用,hover在css中的作用是什么

    hover在css中的作用是什么 发布时间:2020-12-07 10:26:29 来源:亿速云 阅读:143 作者:小新 这篇文章给大家分享的是有关hover在css中的作用是什么的内容.小编觉得挺 ...

  9. css中伪类选择器详解(a:visited不生效的原因)

    css伪类是一种css定义的方法,主要用于对链接显示效果的定义, 主要包括: a:link :链接平常的状态. a:visited:链接被访问之后的状态. a:hover:鼠标停留在链接上的状态. a ...

最新文章

  1. Redis笔记（一）Redis简介
  2. Oracle 学习笔记 11 -- 视图 (VIEW)
  3. 如何优雅地在公众号输入数学公式？推荐几款神器
  4. 探讨TensorRT加速AI模型的简易方案 — 以图像超分为例
  5. Kafka笔记-kafka外网搭建及构建生产者
  6. java 作业 老师与教员信息 类与对象
  7. 软件测试基础课程学习笔记2--贯穿软件生命周期的测试活动
  8. mysql数据库第五章_第五章　数据库的查询
  9. php数组的 需要注意的
  10. 微设计（www.weidesigner.com）介绍系列文章(三)
  11. Sql 四大排名函数（ROW_NUMBER、RANK、DENSE_RANK、NTILE）简介
  12. 2008 r2 server sql 中文版补丁_SQL Server 2008 R2 补丁
  13. linux 显卡驱动
  14. c语言运行的快捷键是什么,c语言执行命令快捷键是什么？？
  15. 第八章 磁盘存储器的管理
  16. 西安建筑科技大学计算机系专业怎么样,西安建筑科技大学好就业吗？附西安建筑大学就业年薪...
  17. 2016都市小说排行版前十推荐
  18. Win10 Build 14942 Edge浏览器闪退怎么解决？
  19. 互联网之父等83位专家联名炮轰美国互联网政策
  20. 程序员如何拨开云雾拿到高薪

热门文章

  1. table 复杂表头
  2. Hyperledger Fabric2中文文档-修改通道配置
  3. Understanding Human Behaviors in Crowds by Imitating the Decision-Making Process
  4. 批量下载coursera课程
  5. C#实现调用打印机（打印字符串、打印绘图、打印图片），还差打印水晶报表
  6. java国际化转换_java 实现国际化 中英文语言切换
  7. U盘Linux启动引导
  8. 51单片机DAC数模转换
  9. OpenCV——图像处理入门：膨胀与腐蚀、图像模糊、边缘检测
  10. c语言中文网严长生,2.shell语法：shell变量定义和使用