我如何在悬停时影响多个班级答案

【问题标题】：How can i affect more than one class on hover我如何在悬停时影响多个班级
【发布时间】：2022-11-24 16:42:49
【问题描述】：

当我悬停一个元素时，我想影响元素的显示、颜色或其他东西。

例子：

.main{
  background:yellow;
  display:inline-block;
}
.sub{
  width:50px;
  height:50px;
  background:blue;
  float:left;
  margin-right:10px;
  opacity:.2;
}
.sub2{
  width:50px;
  height:50px;
  background:blue;
  float:left;
  margin-right:10px;
  opacity:.2;
}
.main:hover .sub,sub2{
  opacity:1;
}

<div class='main'>
  <div class='sub'></div>
    <div class='sub'></div>
    <div class='sub'></div>
  <div class="sub2"></div>
</div>

我可以那样做，但它看起来像重复的。如果我可以这样做，将节省 30 行代码。我可以一次做吗？可能吗？

.main:hover .sub{
  opacity:1;
}

.main:hover .sub2{
  opacity:1;
}

【问题讨论】：

为什么不直接.sub:hover { opacity: 1 }？
显然，当他将鼠标悬停在主类而不是子类上时，他希望效果发生。

标签： html css

【解决方案1】：

从您的问题来看，您的目标是什么尚不清楚。
也许这有助于：

.main:hover .sub, .main:hover .sub2{
  opacity:1;
}

在 css（或 scss）中，您可以通过用逗号分隔多个元素来定位它们。

【讨论】：

【解决方案2】：

您可以选择以指定值开头的类：

[class^=sub]

Documentation

.main{
  background:yellow;
  display:inline-block;
}
.sub{
  width:50px;
  height:50px;
  background:blue;
  float:left;
  margin-right:10px;
  opacity:.2;
}
.sub2{
  width:50px;
  height:50px;
  background:blue;
  float:left;
  margin-right:10px;
  opacity:.2;
}
.main:hover  [class^=sub]{
  opacity:1;
}

<div class='main'>
  <div class='sub'></div>
    <div class='sub'></div>
    <div class='sub'></div>
  <div class="sub2"></div>
</div>

【讨论】：