css 我如何在悬停时影响多个类?

cygmwpex  于 2022-11-26  发布在  其他
关注(0)|答案(3)|浏览(128)

当我悬停在一个元素上时,我想影响元素的显示,颜色或其他东西。类名可以不同。不会总是包含子。
示例:
第一个
我可以这样做,但它看起来像复制。如果我可以这样做,将保存30行代码。我可以这样做一次。这是可能的吗?

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

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

b0zn9rqh1#

可以选择以指定值开头的类:

[class^=sub]

Documentation
第一次

bkhjykvo

bkhjykvo2#

从你的问题中,我们不清楚你的目标是什么。
也许这会有所帮助:

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

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

um6iljoc

um6iljoc3#

根据答案和所有评论,您可能正在寻找:

.main:hover div {
    opacity:1;
}

第一次
如果您只想定位第一级div

.main:hover > div {
    opacity:1;
}

第一个
如果第一级上的所有类型元素(包括p、span等)

.main:hover > * {
    opacity:1;
}
.main {
    background:yellow;
    display:inline-block;
}
div.sub {
    width:50px;
    height:50px;
    background:blue;
    float:left;
    margin-right:10px;
    opacity:.3;
}
div.sub2 {
    width:50px;
    height:50px;
    background:blue;
    float:left;
    margin-right:10px;
    opacity:.3;
}
div.sub3 {
    width:25px;
    height:100px;
    background:red;
    opacity:.5;
}

.main:hover * {
    opacity:1;
    border: 1px solid black;
}
<div class='main'>
    <div class='sub'></div>
    <div class='sub'>
      <div class='sub3'></div>
    </div>
    <div class='sub'></div>
    <div class='sub2'></div>
</div>

相关问题