CSS Hover 属性显示非 div 元素

Posted 2023-03-06

【中文标题】CSS Hover 属性显示非 div 元素

【英文标题】：CSS Hover attribute reveal non-div element

【发布时间】：2014-11-22 18:29:26

【问题描述】：

我希望能够在 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>

【问题讨论】：

我建议使用 Sass，但如果你想直接使用 CSS，试试这个： .something1:hover .text1 display: block; .something2:hover .text2 显示：块； .something3:hover .text3 显示：块； .something4:hover .text4 显示：块；

【参考方案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>

【讨论】：

正确，但我认为选择器应该反过来。

@user3329364 选择所有以“text-x”类开头的span标签 - jsfiddle.net/3dpfd6ou

~ 不是“相邻兄弟选择器”，而是“通用兄弟选择器”。