在Hover上，将CSS规则应用于多个类
在Hover上，将CSS规则应用于多个类
提问于 2018-08-12 02:03:41
我有两个div，我想通过悬停第一个div来影响它们，我在论坛上发现了如何通过悬停第一个div来影响第二个div，但不是两个都影响。
下面是我的代码：
.red{
height: 150px;
width: 150px;
background-color: red;
float:left;
margin-right: 20px;
}
.blue{
height: 150px;
width: 150px;
background-color: blue;
float:left;
}
.red:hover ~ .blue{
transition: all .2s ease-in-out;
transform: scale(1.1);
}<html>
<head>
</head>
<body>
<div class="red"></div>
<div class="blue"></div>
</body>
</html>
谢谢你帮我。
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-08-12 02:08:58
你可以将red:hover选择器添加到最后的样式声明中，比如你对悬停的红色div所做的，就像你对蓝色div所做的那样
.red{
height: 150px;
width: 150px;
background-color: red;
float:left;
margin-right: 20px;
}
.blue{
height: 150px;
width: 150px;
background-color: blue;
float:left;
}
/* added one more selector here */
.red:hover,
.red:hover ~ .blue{
transition: all .2s ease-in-out;
transform: scale(1.1);
}<html>
<head>
</head>
<body>
<div class="red"></div>
<div class="blue"></div>
</body>
</html>
Stack Overflow用户
发布于 2018-08-12 02:10:17
要将规则应用于多个选择器，请在选择器之间使用逗号
.red:hover ~ .blue, .red:hover {
transition: all .2s ease-in-out;
transform: scale(1.1);
}Stack Overflow用户
发布于 2018-08-12 02:15:35
你总是可以给你想要影响的div提供相同的类。
<html>
<head>
</head>
<body>
<div class="red affect"></div>
<div class="blue affect"></div>
</body>
</html>
.affect {
width: 150px;
height: 150px;
float:left;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.affect:hover {
transition: all .2s ease-in-out;
transform: scale( 1.2 );
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51802397
复制相关文章
相似问题
腾讯云开发者
