Question

悬停时是否有一种简单的方法可以反转颜色顺序？

在这里使用这个技巧我有正确的顺序＆gt;左：

&:hover,
&:hover ~ button {
    color: red
}

右边的小提琴＆gt;左：https://jsfiddle.net/celio/Lowc1ruh/

左边的例子＆gt;右：https://css-tricks.com/examples/StarRating/

我无法使用float，position: absolute;以及任何改变我当前HTML的正确顺序的内容。

纯CSS示例：

button {
  margin: 0;
  padding: 5px;
  border: none;
  background: transparent;
  display: inline-block;
}
button:before {
  content: "⋆";
  font-size: 5rem;
  line-height: 1;
}
button:hover,
button:hover ~ button {
  color: red;
}

<div class="wrapper">
  <button></button>
  <button id="2"></button>
  <button></button>
  <button></button>
  <button></button>
</div>

Answer 1

一种方法是将所有子button元素color: red;悬停在.wrapper上时。然后使用同级选择器（~）将当前悬停元素之后的任何元素更改为color: black;。

你应该删除元素之间的任何空格（在这种情况下，我将它们放在HTML中的一行），以确保光标始终悬停在一个星上。

使用纯CSS的示例：

.wrapper button {
  margin: 0;
  padding: 5px;
  border: none;
  background: transparent;
  display: inline-block;
}
.wrapper button:before {
  content: "⋆";
  font-size: 5rem;
  line-height: 1;
}
.wrapper button:hover ~ button {
  color: black;
}
.wrapper:hover button {
  color: red;
}

<div class="wrapper">
  <button></button><button id="2"></button><button></button><button></button><button></button>
</div>

JS Fiddle using SASS

使用CSS的评级系统（从左到右悬停）

1 个答案: