Html 如何在悬停时使用 CSS 更改许多同级元素

发布于08月31日

在下面的示例中，当我们悬停组1中的任何行时，组1的所有行都会更改 colored颜色 .我想将同样的逻辑应用于N个组.

假设我们有300个这样的组，每组3行.我们如何在不复制和粘贴300次css规则的情况下 for each 组实现此突出显示.

这能用纯css实现吗？

.parent:has(.group-1:hover) .group-1 {
  background-color: blue;
}

<body class="parent">
  <p class="group-1">Group 1</p>
  <p class="group-1">Group 1</p>
  <p class="group-1">Group 1</p>
  <p class="group-2">Group 2</p>
  <p class="group-2">Group 2</p>
  <p class="group-2">Group 2</p>
  <p class="group-3">Group 3</p>
  <p class="group-3">Group 3</p>
  <p class="group-3">Group 3</p>
</body>

推荐答案

如果您不能更改HTML以将它们包装在组中，您可以动态创建您的CSS，这样您就不需要手动写出所有规则.

// get all the elements with the group class
const allElements = document.querySelectorAll('p[class*="group-"]')

// get all the classNames from the elements
const allClassNames = Array.from(allElements).map(({
  className
}) => className);

// de-dupe
const groupings = new Set(allClassNames);

// build the selectors
const selectors = Array.from(groupings.values()).map(className => `.parent:has(.${className}:hover) .${className}`).join(",")

// your CSS you want to be in the rule
const theStyles = 'background-color: blue;'

// make a stylesheet
const styleEl = document.createElement("style");

// add it to the document
document.head.appendChild(styleEl);

//get the sheet
const styleSheet = styleEl.sheet;

//create the new rule
styleSheet.insertRule(`${selectors}{${theStyles}}`, 0);

P {
  margin: 0; padding: 0;
}

<div class="parent">
  <p class="group-1">Group 1</p>
  <p class="group-1">Group 1</p>
  <p class="group-1">Group 1</p>
  <p class="group-2">Group 2</p>
  <p class="group-2">Group 2</p>
  <p class="group-2">Group 2</p>
  <p class="group-3">Group 3</p>
  <p class="group-3">Group 3</p>
  <p class="group-3">Group 3</p>
</div>