同一个class选择器,鼠标悬停其中一个class改变对应背景颜色
时间: 2023-08-12 07:28:38 浏览: 60
如果你想要同一个class选择器的其中一个元素在鼠标悬停时改变背景颜色,可以使用CSS的:hover伪类和子选择器来实现。假设你的HTML代码如下:
```
<div class="class1">
<div class="class2">元素1</div>
<div class="class2">元素2</div>
</div>
```
如果你想要鼠标悬停在元素1时改变背景颜色,可以使用以下CSS代码:
```
.class1:hover .class2:first-child {
background-color: red;
}
```
这样当鼠标悬停在class1元素上时,class1元素内第一个class2元素的背景颜色将变成红色。如果你想要鼠标悬停在元素2时改变背景颜色,可以使用以下CSS代码:
```
.class1:hover .class2:last-child {
background-color: blue;
}
```
这样当鼠标悬停在class1元素上时,class1元素内最后一个class2元素的背景颜色将变成蓝色。你也可以根据实际情况调整选择器和颜色。
相关问题
同个class选择器,鼠标悬停对应class改变背景颜色
如果你想要同一个class选择器的不同元素在鼠标悬停时改变背景颜色,可以使用CSS的:hover伪类和通配选择器来实现。例如,如果你的class选择器为class1,你可以使用以下CSS代码:
```
.class1:hover {
background-color: red;
}
.class1:hover * {
background-color: blue;
}
```
这样当鼠标悬停在class1元素上时,class1元素的背景颜色将变成红色,同时class1元素内的所有子元素的背景颜色将变成蓝色。你也可以根据实际情况调整颜色和选择器。
多个class选择器,鼠标悬停对应class改变背景颜色
可以使用CSS的:hover伪类和class选择器来实现鼠标悬停时改变背景颜色。例如,如果你有两个class选择器为class1和class2,你可以使用以下CSS代码:
```
.class1:hover {
background-color: red;
}
.class2:hover {
background-color: blue;
}
```
这样当鼠标悬停在class1元素上时,背景颜色将变成红色,当悬停在class2元素上时,背景颜色将变成蓝色。当然,你可以根据实际情况调整颜色和选择器。
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![crx](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)