html中CSS:hover选择器改变子元素、同级元素、就近元素的样式

鼠标悬浮覆盖元素后，以前使用js的mouseover和mouseout添加监听事件可以实现交互。现在可以使用CSS中的:hover选择器提高性能。:hover选择器可以针对不同的HTML元素，在鼠标悬停时改变元素（也可以是子元素、同级元素、就近元素）的样式，增强网页的互动性和用户体验。

定义：

:hover 选择器用于选择鼠标指针浮动在上面的元素。

:hover 选择器适用于所有元素

基础用法：

这个表示的是：当鼠标悬浮在a这个样式上的时候，a的背景颜色设置为黄色

a:hover

{

background-color:yellow;

}

这个是最普通的用法了，只是通过a改变了style

进阶用法:

使用a 控制其他块的样式：

使用a控制a的子元素 b：

.a:hover .b {

background-color:blue;

}

使用a控制a的兄弟元素 c(同级元素)：

.a:hover + .c {

color:red;

}

使用a控制a的就近元素d：

.a:hover ~ .d {

color:pink;

}

总结一下：

1. 中间什么都不加  控制子元素；

2. ‘+’ 控制同级元素(兄弟元素)；

3. ‘～’ 控制就近元素；

到此这篇关于html中CSS: hover选择器改变子元素、同级元素、就近元素的样式的文章就介绍到这了,更多相关CSS: hover选择器的用法内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家！

最新评论