CSS / Less / Sass - 在 :hover 时匹配每个先前的兄弟姐妹

Posted 2023-05-08

【中文标题】CSS / Less / Sass - 在 :hover 时匹配每个先前的兄弟姐妹

【英文标题】：CSS / Less / Sass - Match every previous siblings when :hover

【发布时间】：2015-08-16 00:13:46

【问题描述】：

在这段代码中：

<div id="Container">
  <span class='first'>First</span>
  <span class='second'>Second</span>
  <span class='third'>Third</span>
</div>

我想换颜色，当:hover。

如果 (.first:hover) 那么.first color: red; 如果 (.second:hover) 那么.first, .second color: red; 如果 (.third:hover) 那么.first, .second, .third color: red;

如果没有 JS，这可能吗？我可以接受 CSS Hacks :)

---

可能的答案：

@panther 的回答

---

更难的版本：

<div id="Container">
  <span class='first' style='color: red'>First</span>
  <span class='second' style='color: green'>Second</span>
  <span class='third' style='color: blue'>Third</span>
</div>

如果 (.first:hover) 那么.first color: pink; 如果 (.second:hover) 那么.first, .second color: pink; 如果 (.third:hover) 那么.first, .second, .third color: pink;

---

答案：

@Armfoot 的回答似乎不错:)

【问题讨论】：

据我所知，这是不可能的，因为 Less 仍然可以编译成 CSS，而 CSS 无法实现您要查找的内容。 （注意：当我说 CSS 不可能时，我没有包括任何可能的黑客攻击）

@Harry 永远不要说永远......也许可以用@at-root 属性完成一些事情，所有这些都有一个共同的类作为父类......我仍在考虑这个问题。 +1 挑战：P

@Armfoot：这就是为什么我说，我不包括黑客。

@Armfoot：这是一个小技巧，没有明确的解决方案。它有时适用于全宽或浮动的块元素（项目之间没有空格）。有的时候可以用，有的时候需要JS。

@Armfoot：是的。但是，我仍然会谨慎地建议将其作为答案，因为虽然它可能适用于所指定的确切要求，但如果问题是 XY 问题的情况，则可能不会。

【参考方案1】：

在 CSS 中没有先前的同级选择器，但是……您有时可以使用已知的选择器来做到这一点。有时。

<style>
    span color: #000; display: block;
    div:hover span color: #f00;
    span:hover ~ span color: #000
</style>

<div id="FirstSecondThird-Container">
    <span class='first'>First</span>
    <span class='second'>Second</span>
    <span class='third'>Third</span>
</div>

https://jsfiddle.net/45zLdcvr/

它适用于blockspans（当然是浮动的）。使用spans 具有默认display: inline，当您将div 悬停在跨度之间的空间中时，它会闪烁。

更新： 当每个跨度都有自己的颜色时，您更新了问题，那么它可能是：

span color: red
.second color: green
.third color: blue

span display: block;
div:hover span color: pink;
span:hover ~ .second color: green
span:hover ~ .third color: blue

https://jsfiddle.net/45zLdcvr/1/

【讨论】：

我想，我可以将border : 1px solid transparent 用于内联（-block/-flex）跨度作为闪烁的补丁。

【参考方案2】：

我找到了一种基于panther's answer 的@each in SASS 方法：

$containerID: FirstSecondThird-Container;
##$containerID:hover span color:pink 
@each $spanclass, $spancolor in (first, red), (second, green), (third, blue) 
  ##$containerID span:hover ~ .#$spanclass, .#$spanclass 
    color: #$spancolor;
  

它有点短，但结果如下（生成的 CSS）：

#FirstSecondThird-Container:hover span 
  color: pink;

#FirstSecondThird-Container span:hover ~ .first, .first 
  color: red;

#FirstSecondThird-Container span:hover ~ .second, .second 
  color: green;

#FirstSecondThird-Container span:hover ~ .third, .third 
  color: blue;


span display: block; /* this line was not generated, it's just to place them vertically */

<div id="FirstSecondThird-Container">
  <span class='first'>First</span>
  <span class='second'>Second</span>
  <span class='third'>Third</span>
</div>

与panther's fiddle有相似的CSS规则。

不错的挑战123qwe :)

【参考方案3】：

这就是我认为可以巧妙地完成您想要实现的目标

@mixin color_on_hover($class)

@if $class==first span:nth-of-type(1)color:red;
@else if $class==second span:nth-of-type(1), span:nth-of-type(2)color:red;
@else if $class==third span:nth-of-type(1), span:nth-of-type(2), span:nth-of-type(3)color:red;


span.first:hover
@include color_on_hover(first);

span.second:hover
@include color_on_hover(second);

span.third:hover
@include color_on_hover(third);

希望对您有所帮助！

【讨论】：

对不起 Django，这会产生像 span.first:hover span.nth-of-type(1) 这样的规则，因此它不能回答问题（你忘记了 include 中的 c）。想想吧。

是的，自定义级别更高，尝试为每个动作定义不同的颜色，你会发现自己不得不产生这些规则。

This fiddle has the generated CSS from your code 没有提供解决方案...与正在工作的panther's fiddle 比较...