CSS（SCSS）在悬停元素上选择同级类[关闭]

Question

是否可以使用纯 CSS 在悬停时删除/更改兄弟类的样式？

我尝试过类似的方法，但失败得很惨。

HTML：

<ul>
   <li class="item active">name1</li>
   <li class="item">name2</li>
   <li class="item">name3</li>
   <li class="item">name4</li>
</ul>

SCSS

ul {
  padding: 0;
  margin: 0;

  li {
    cursor: pointer;
    list-style: none;
    padding: 12px 16px;

    &.active {
       background-color: $primary-blue;
       color: white;
    }

    &:hover {
       background-color: $primary-blue;
       color: white;

       ~ .active {
         background-color: white !important;
         color: black !important;
       }
    }
  }
}

那么我想实现什么...我想悬停在任何元素上以赋予它特定的样式，同时我想隐藏活动元素的样式。活动元素是随机的，可以是第三、第二、第一、第四等……列表最多有 10 个元素。这个例子被简化了。

编辑！重要！ 我看到人们很难理解我到底想要什么，我希望这个笨蛋能澄清一切:)

https://plnkr.co/edit/RQy04Qv1zy0nukhnlN82

Answer 1

对于给定的布局，唯一的纯 CSS 解决方案可以使用 order property（使用 Flexbox 或 Grid ):

ul {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

li {
  cursor: pointer;
  list-style: none;
  padding: 12px 16px;
}
 
li:last-child {
  order: -1; /* moved back up to achieve the same layout */
}
 
.active {
  background-color: blue;
  color: white;
}

li:hover {
  background-color: blue;
  color: white;
}

li:hover ~ .active {
  background-color: white;
  color: black;
}

<ul>
 <li class="item">name2</li>
 <li class="item">name3</li>
 <li class="item">name4</li>
 <li class="item active">name1</li> <!-- has to be the last in order for the ~ selector to take effect -->
</ul>

Answer 2

“那么我想要实现什么...我想悬停在任何元素上以赋予它特定的样式，同时我想隐藏活动元素的样式。活动元素是随机的，它可以是第三、第二、第一、第四等...列表最多可包含 10 个元素。”

---

仅使用 CSS 即可获得该行为，但布局需要更改，因为对复杂行为使用纯 CSS 解决方案涉及：

1. 相对于其他元素的特定元素位置。由于 CSS 级联和继承限制，必须仔细规划父/祖先与子/后代和兄弟关系。

2. 需要组、类型、标签等所特有的某些元素的特殊属性和默认行为。所以仅仅使用列表和 CSS 不会得到你想要的行为。

布局

1. <input id='chx0' type="checkbox" hidden='true'> 是决定其他元素的状态（一组特定样式）的不可见开关。当复选框为 :checked 或未选中时，所有受影响的元素都处于活动状态。

2. <label id='btn0' for='chx0'></label> 是用户单击的按钮，然后远程单击此属性所针对的复选框： for= "chx0"

3. 由于规则集的级联，只有继续的元素会受到影响，基本上是下一个的任何兄弟元素 沿着 DOM 树（包括该兄弟姐妹的孩子/后代）。我从人类家庭的角度来考虑它：

   Previous-Element-Sibling <section>哥哥</section>

   参考点 ? <input id='chx0' type='checkbox'>

   Next-Element-Sibling <li>弟弟</li>

   你可以欺负你的弟弟，但你不能欺负你的哥哥。

4. 在Demo 2中，有2个复选框/标签组合：

   • ACTIVE / INACTIVE 处理.active 元素的行为方式。

   • ORDER / CHAOS 操纵<dd> 的order（不是为了好玩而添加的要求）

---

我不知道 SCSS，但据我所知，您希望兄弟姐妹或兄弟姐妹改变风格，但据我所知，general sibling combinator ~ 正在工作，但风格无效：白色背景和黑色文本。此演示使用带有反色的adjacent sibling combinator +，因此您可以实际看到变化。

演示1

ul {
  padding: 0;
  margin: 0;
}

li {
  cursor: pointer;
  list-style: none;
  padding: 12px 16px;
}

li.active {
  background-color: blue;
  color: white;
}

li:hover {
  background-color: blue;
  color: white;
}

li:hover+li {
  background-color: black !important;
  color: white !important;
}

<ul>
  <li class="item active">name1</li>
  <li class="item">name2</li>
  <li class="item">name3</li>
  <li class="item">name4</li>
</ul>

演示 2

.dataList {
  display: flex;
  flex-flow: column nowrap;
}

.btn {
  background: rgba(0, 0, 0, 0);
  padding: 3px 5px;
  margin: 20px 0 -15px 30px;
  border: 2px ridge grey;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  width: 12ch;
  text-align: center;
}

#btn0::before {
  content: 'ACTIVE';
  color: green;
}

#chx0:checked~#btn0::before {
  content: 'INACTIVE';
  color: tomato;
}

#btn1::before {
  content: 'ORDER';
  color: blue;
}

#chx1:checked~#btn1::before {
  content: 'CHAOS';
  color: orange;
}

#chx1:checked~.dataList dd:nth-of-type(1) {
  order: 8
}

#chx1:checked~.dataList dd:nth-of-type(2) {
  order: 5
}

#chx1:checked~.dataList dd:nth-of-type(3) {
  order: 6
}

#chx1:checked~.dataList dd:nth-of-type(4) {
  order: 10
}

#chx1:checked~.dataList dd:nth-of-type(5) {
  order: 3
}

#chx1:checked~.dataList dd:nth-of-type(6) {
  order: 2
}

#chx1:checked~.dataList dd:nth-of-type(7) {
  order: 4
}

#chx1:checked~.dataList dd:nth-of-type(8) {
  order: 1
}

#chx1:checked~.dataList dd:nth-of-type(9) {
  order: 7
}

#chx1:checked~.dataList dd:nth-of-type(10) {
  order: 9
}

.data {
  color: white;
  background: rgba(0, 0, 0, 0.8);
  border: 2px inset white;
  padding: 3px 5px
}

.active {
  color: gold;
  border: 2px ridge gold;
  background: rgba(0, 0, 0, 1);
}

.active::after {
  content: ' is ACTIVE';
  font-weight: 900;
}

#chx0:checked~.dataList:hover .data.active {
  border: 2px inset white;
  color: white;
  background: rgba(0, 0, 0, 0.8);
}

#chx0:checked~.dataList:hover .active::after {
  content: '';
  font-weight: normal;
}

.data:hover {
  color: #000;
  background: #fff;
}

.data.active:hover {
  color: lime;
  border-color: lime;
  background: #000;
}

#chx0:checked~.dataList .data.active:hover {
  color: #000;
  background: #fff;
}

<input id='chx0' type='checkbox' hidden='true'>
<input id='chx1' type='checkbox' hidden='true'>

<label id='btn0' class='btn' for='chx0'></label>
<label id='btn1' class='btn' for='chx1'></label>

<dl class='dataList'>
  <dt class='data term'>DATA LIST</dt>
  <dd class='data'>ITEM 0</dd>
  <dd class='data'>ITEM 1</dd>
  <dd class='data'>ITEM 2</dd>
  <dd class='data'>ITEM 3</dd>
  <dd class='data active'>ITEM 4</dd>
  <dd class='data'>ITEM 5</dd>
  <dd class='data'>ITEM 6</dd>
  <dd class='data'>ITEM 7</dd>
  <dd class='data'>ITEM 8</dd>
  <dd class='data'>ITEM 9</dd>
</dl>

Answer 3

我认为您可能还需要将 & 符号添加到活动选择器中，如下所示：

li {
    cursor: pointer;
    list-style: none;
    padding: 12px 16px;

    &.active {
       background-color: $primary-blue;
       color: white;
    }

    &:hover {
       background-color: $primary-blue;
       color: white;

       ~ &.active {
         background-color: white !important;
         color: black !important;
       }
    }
  }