Question

我希望能够在div中的每个特定元素上使用CSS悬停元素来影响每个相应的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

＆＃13;

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

＆＃13;

<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>

＆＃13;

选择以＆＃34; span x＆＃34;开头的所有text标签类：

＆＃13;

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

＆＃13;

<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>

＆＃13;

CSS Hover属性显示非div元素

1 个答案: