通过悬停更改一个特定列表项的样式 - CSS答案

【问题标题】：Change style of one particular list item by hovering it - CSS通过悬停更改一个特定列表项的样式 - CSS
【发布时间】：2020-06-06 16:13:09
【问题描述】：

我有一个这样的列表，我希望它将我悬停的列表项的字体粗细更改为粗体，但它不是将更改应用于我的文档所有列表的整个列表（取决于我的尝试）

li:hover {
  cursor: pointer;
  font-weight: bold;
}

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="2.css">
</head>
<body>

  <ul class="tree" id="tree">
    <li>Animals
      <ul>
        <li>Mammals
          <ul>
            <li>Cows</li>
            <li>Donkeys</li>
            <li>Dogs</li>
            <li>Tigers</li>
          </ul>
        </li>
        <li>Other
          <ul>
            <li>Snakes</li>
            <li>Birds</li>
            <li>Lizards</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>Fishes
      <ul>
        <li>Aquarium
          <ul>
            <li>Guppy</li>
            <li>Angelfish</li>
          </ul>
        </li>
        <li>Sea
          <ul>
            <li>Sea trout</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>

</body>
</html>

我想知道有没有办法在不向元素添加 ID 或类的情况下做到这一点。

我希望它以动态的方式进行。

如果有办法用 JS 做到这一点，那就太好了。

【问题讨论】：

这能回答你的问题吗？ Change opacity on all elements except hovered one
@Vepthy 不，不是。
这里的这个选项怎么样？ stackoverflow.com/q/13233878/11799851
@cluelessdev 对不起，但不是。我没有嵌套标签。
有了你的结构，只有 CSS 是不可能的......是的，没有 id 和 class 的 js 是可能的

标签： javascript html css

【解决方案1】：

这是一种似乎可行的方法。解释：

li 元素被明确地赋予 font-weight: normal，这样父级上的 font-weight: bold 就不会级联。
mouseover 事件处理程序位于顶层以处理所有后代事件。 addEventListener 的 true useCapture 参数允许我们这样做。
我们允许事件继续冒泡，直到我们达到li 目标。
然后我们以编程方式将font-weight 设置为li
通过防止进一步传播，我们确保父元素 li 元素在后代已经加粗时不会收到通知

const tree = document.getElementById('tree');
tree.addEventListener('mouseover', (event) => {
  if (event.target.tagName === 'LI') {
    event.target.style.fontWeight = 'bold';
    event.stopPropagation();
  }
}, true);
tree.addEventListener('mouseout', (event) => {
  if (event.target.tagName === 'LI') {
    event.target.style.removeProperty('font-weight');
  }
}, true);

#tree li {
  cursor: pointer;
  font-weight: normal;
}

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="2.css">
</head>
<body>

  <ul class="tree" id="tree">
    <li>Animals
      <ul>
        <li>Mammals
          <ul>
            <li>Cows</li>
            <li>Donkeys</li>
            <li>Dogs</li>
            <li>Tigers</li>
          </ul>
        </li>
        <li>Other
          <ul>
            <li>Snakes</li>
            <li>Birds</li>
            <li>Lizards</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>Fishes
      <ul>
        <li>Aquarium
          <ul>
            <li>Guppy</li>
            <li>Angelfish</li>
          </ul>
        </li>
        <li>Sea
          <ul>
            <li>Sea trout</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>

</body>
</html>

【讨论】：

【解决方案2】：

按照@Armin Guearmazi 的回答，这应该有点用：

ul li ul li ul li:hover,
ul li ul li:hover,
ul li:hover {
  cursor: pointer;
  font-weight: bold;
}


ul li ul li:hover ul,
ul li:hover li,
ul li:hover ul {
  cursor: normal;
  font-weight: normal;
}

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="2.css">
</head>
<body>

  <ul class="tree" id="tree">
    <li>Animals
      <ul>
        <li>Mammals
          <ul>
            <li>Cows</li>
            <li>Donkeys</li>
            <li>Dogs</li>
            <li>Tigers</li>
          </ul>
        </li>
        <li>Other
          <ul>
            <li>Snakes</li>
            <li>Birds</li>
            <li>Lizards</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>Fishes
      <ul>
        <li>Aquarium
          <ul>
            <li>Guppy</li>
            <li>Angelfish</li>
          </ul>
        </li>
        <li>Sea
          <ul>
            <li>Sea trout</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>

</body>
</html>

【讨论】：

对不起，我希望它只更改悬停的确切元素的样式。而且它看起来不像是动态方式：/
“动态方式”是什么意思？
我的意思是，如果我将添加或删除一些元素（深入）它不会破坏代码。
那么你不能用 CSS 做到这一点。您将需要 JavaScript。

【解决方案3】：

其余一切都很好，只需尝试以下 CSS 代码：

ul li ul li ul li:hover {
    /* Here write your styling code */
}

我希望这会有所帮助。

【讨论】：

【解决方案4】：

您可以使用css element selectors 选择包含在另一个标签中的一些标签。它的语法很简单：

ul li ul li ul li:hover {
   /*Your style here*/
}

查看demo

【讨论】：

抱歉，它不适用于父列表项 + 我希望它是一种动态方式
然后将一个添加到父列表项：ul li ul li:hover 和 ul li:hover
@Vepthy 究竟如何？请在工作示例中展示它吗？
是的。第二

【解决方案5】：

ul li ul li ul li:hover {
            cursor: pointer;
            font-weight: bold;
        }

用这个替换你的样式，你会很高兴的。

【讨论】：