：hover的使用，即当鼠标指针移入元素时，所做出的样式设置

示例一

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>demo01</title><style>*{margin: 0;padding: 0;}ul li{width: 300px;margin-top: 10px;background: #ff0000;}ul li:hover{background: #000000;}</style>
</head>
<body><ul><li></li><li></li><li></li></ul>
</body>
</html>

以上情况存在于当鼠标指针移入元素，通过：hover使该元素自身改变新的样式

示例二

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>demo01</title><style>*{margin: 0;padding: 0;}.container{width: 300px;height: 300px;border: 1px solid #ff9f5a;}.content{width: 100px;height: 100px;background: #27e7ff;}.container:hover .content{background: #000000;}</style>
</head>
<body><div class="container"><div class="content"></div></div>
</body>
</html>

以上示例中，当存在父子关系的时候，可以通过父级的：hover使得子级的样式发生改变，写法为 .container:hover .content，hover后面有一个空格；但是，子级：hover改变不了父级的样式

示例三

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>demo01</title><style>*{margin: 0;padding: 0;}.container{width: 300px;height: 300px;border: 1px solid #ff9f5a;}.content{width: 100px;height: 100px;background: #27e7ff;}.container:hover  .content{background: #000000;}</style>
</head>
<body><div class="container"></div><div class="content"></div>
</body>
</html>

以上示例，当两个元素不是父子关系，为同胞兄弟关系时，则通过 .container:hover .content这样的写法是无效的，则需要通过“ ”号，即 .container:hover .content才能显示出效果；但是要注意两个元素的先后顺序哦~

不足之处，请多多指教…

css：hover伪类的使用相关推荐

CSS:hover伪类使用
CSS:hover伪类使用 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 开发工具与关键技术:Adobe Dreamwe ...
CSS :hover 伪类
实例规定链接的颜色: a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {co ...
使用css伪类选择器,css的伪类选择器的使用
伪类选择器,在不同情况下显示的css,伪类选择器在处理页面的美观是很大帮助.其实很多美丽的按钮或者页面都是有这些基础的知识实现的,掌握好基础很重要. 名字实例说明 :link a:link 选择所 ...
鼠标的移入、移出事件与css中的hover伪类
开发工具与关键技术:html+css+js 作者: 李伙撰写时间: 2019年1月19日鼠标的移入.移出事件是一个模仿悬停事件(鼠标移入到一个对象上以及移出这个对象)的方法,当鼠标移动到一个匹配的 ...
html css hover事件,用:hover伪类代替js的hover事件_html/css_WEB-ITnose
制作二级菜单要实现鼠标移动上去显示子菜单,鼠标移出子菜单隐藏,或者其他类似需求的地方,首先我会想到用jquery的hover事件来实现,如: $(".nav").hover(fun ...
css选择器、hover伪类
一.css选择器使用css选择器基本流程: 1.制作所需的选择器,并在其中写入样式. 2.将选择器绑定到指定的HTML标签上. 1)class选择器 class选择器 :用 . 来标示自身, 自定义 ...
Hover伪类在IE6中的实现
鼠标滑过行,行改变颜色可以使用javascript写,onmouseover,onmouseout,也可以使用css2的伪类hover,但是ie6对伪类支持的不好,需要变换一下思路,要么使用javas ...
CSS :active 伪类
:active -- CSS :active 伪类,适用于一个元素被激活时的样式语法: :active CSS版本:CSS1 引用网址:http://www.dreamdu.com/css/pseu ...
html css链接伪类大全,什么是css链接伪类？
什么是css链接伪类?下面本篇文章就来给大家介绍一下css链接伪类是什么?有哪些?有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 什么是css链接伪类? css链接伪类就是css内置 ...
CSS :has伪类
CSS :has伪类 1 概述 2 实例说明 2.1 表单元素前面加* 2.2 拖拽列表 2.3 多层级hover 2.4 评星组件 3 兼容性 1 概述 :has()表示满足一定条件后,就会匹配该元 ...

css：hover伪类的使用

示例一

示例二

示例三

css：hover伪类的使用相关推荐

最新文章

热门文章