CSS Hover 属性显示非 div 元素

Question

我希望能够在 div 中的每个特定元素上使用 CSS hover 元素来影响每个相应的 span 元素，也就是悬停在“something1”上应该显示“text1”等等。

是否可以在不添加一堆 div 的情况下完成此操作？

span {
  display: none;
 }

.something1:hover .text1 {
  display: block;
  }

<div class="container">
    <i class="something1"></i>
    <i class="something2"></i>
    <i class="something3"></i>
    <i class="something4"></i>
    <span class="text1">Show 1</span>
    <span class="text2">Show 2 </span>
    <span class="text3">Show 3</span>
    <span class="text4">Show 4</span>   
</div>

Answer 1

您可以通过使用 CSS ~ 通用兄弟选择器来实现这一点，如下所示：

~ 组合器分隔两个选择器并匹配第二个 仅当它在第一个元素之前，并且两者共享一个共同的元素 父母。 - Mozilla MDN

span {
    display: none;
}
.something1:hover ~ .text1 {
    display: block;
}

<div class="container">
    <i class="something1">Something 1</i>
    <i class="something2"></i>
    <i class="something3"></i>
    <i class="something4"></i>
    <span class="text1">Show 1</span>
    <span class="text2">Show 2 </span>
    <span class="text3">Show 3</span>
    <span class="text4">Show 4</span>   
</div>

选择所有以“textx”类开头的span标签：

span {
    display: none;
}
.something1:hover ~ span[class*="text"] {
    display: block;
}

<div class="container">
    <i class="something1">Something 1</i>
    <i class="something2"></i>
    <i class="something3"></i>
    <i class="something4"></i>
    <span class="text1">Show 1</span>
    <span class="text2">Show 2 </span>
    <span class="text3">Show 3</span>
    <span class="text4">Show 4</span>   
</div>