Question

我正在使用HTML / CSS为rating工作。

您可以查看以下示例。

ul {
  display: inline-block;
  list-style: none;
  cursor: pointer;
}

ul li {
  color: gray;
  display: inline-block;
  padding: 5px;
}

ul li:hover, li:hover ~ li {
  background-color: red;
  color: white;
}

<ul>
  <li>@</li>
  <li>@</li>
  <li>@</li>
  <li>@</li>
  <li>@</li>
</ul>

如您所见，当我hover li时，我正在获得同级元素red。相反，我希望降序元素得到red。

我不希望我的评级以反色显示-像所有red一样，但选择项是gray。这不是我想要的。

谢谢

Answer 1

ul {
  display: inline-block;
  list-style: none;
  cursor: pointer;
}

ul li {
  color: gray;
  display: inline-block;
  padding: 5px;
  float: right;
}

ul li:hover, li:hover ~ li {
  background-color: red;
  color: white;
}

<ul>
  <li>@</li>
  <li>@</li>
  <li>@</li>
  <li>@</li>
  <li>@</li>
</ul>

如何为float: right;添加ul li？我认为这是您想要的方式。谢谢

Answer 2

ul {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center;
  list-style: none;
  cursor: pointer;
}

ul li {
  color: gray;
  padding: 5px;
}

ul li:hover, li:hover ~ li {
  background-color: red;
  color: white;
}

<ul>
  <li>@</li>
  <li>@</li>
  <li>@</li>
  <li>@</li>
  <li>@</li>
</ul>

如何使用flex？它提供了row-reverse。谢谢

Answer 3

如果必须保留评级顺序，这是另一种方法。

当<ul>悬停在上方时，我将所有评级都设置为“选定”。
然后，我将跟随<li>元素之后的兄弟姐妹设置回“ unselected”。

ul {
  display: inline-flex;
  list-style: none;
  cursor: pointer;
  margin: 0;
  padding: 0;
}

ul li {
  color: gray;
  padding: 5px;
}

ul:hover li {
  background-color: red;
  color: white;
}

li:hover ~ li {
  background-color: transparent;
  color: gray;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

Answer 4

尝试以下代码：

modprobe ip_nat_pptp

有没有办法选择降序元素？

4 个答案: