创意 CSS 解决方案。突出显示所有元素答案

【问题标题】：Creative CSS Solution. Highlighting all elements创意 CSS 解决方案。突出显示所有元素
【发布时间】：2020-11-21 15:28:50
【问题描述】：

我正在尝试提出一种创造性的解决方案，用于在按钮悬停时突出显示一堆元素。

现在在这个小提琴中：https://jsfiddle.net/5jv28o7m/

当您将鼠标悬停复制时，它旁边的“1” div 会突出显示。

我希望"Element 1", "Element 2", "Element 3" and "Element 4" 在复制按钮悬停时突出显示。有谁知道可以实现这一点的 CSS 选择器的创造性安排？我正在尝试使用唯一的 CSS 解决方案来解决这个问题。

.list {
  flex: 0;
  display: flex;
  width:  200px;
  height: 200px;
  flex-direction: column;
  background-color: pink;
}

.listHeader {
  flex: 0;
  display: flex;
  flex-direction:  row;
  background-color: orange;
  padding: 2px;
}

.copyButton {
  flex: 0;
  background-color: green;
}

.copyButton:hover {
  color: blue;
}

.copyableElement {
  background-color: blue;
  margin: 2px;
}

.copyableElement:hover {
  background-color: grey;
}

.copyButton:hover ~ .copyableElement {
  background-color: yellow;
}

<div class="list">
  <div class="listHeader">
    <div style="flex: 1;"></div>
    <div class="copyButton">Copy</div>
    <div class="copyableElement">1</div>
  </div>
  <div class="copyableElement">Element 1</div>
  <div class="copyableElement">Element 2</div>
  <div class="copyableElement">Element 3</div>
  <div class="copyableElement">Element 4</div>
</div>

【问题讨论】：

当您将鼠标光标悬停在副本上时，您是要系统选择，还是将悬停应用于所有？
虽然到您的 JS Fiddle 的链接表示赞赏，但它并不能取代您的问题中需要该代码，请编辑您的问题以包含代码（理想情况下作为堆栈片段）。虽然要回答您的问题，但 CSS 不能这样做，因为它需要一个父选择器。

标签： css css-selectors hover

【解决方案1】：

需要稍微改变一下 HTML 结构：

<div class="list">
  <div class="listHeader">
    <div style="flex: 1;"></div>
    </div>
  <div class="copyButton">Copy<span class="copyableElement">1</span></div>
  <div class="copyableElement">Element 1</div>
  <div class="copyableElement">Element 2</div>
  <div class="copyableElement">Element 3</div>
  <div class="copyableElement">Element 4</div>
</div>

还有这个css：

.copyableElement {
  background-color: blue;
  margin: 2px;
  float: right;
}

你可以查看我的codepen：https://codepen.io/Mithunjack/pen/OJMKWRv?editors=1100 如果您被困在任何地方，请告诉我！快乐编码！

【讨论】：