HTML/CSS中:hover伪类在项目中失效，请求排查问题

你的代码存在两个核心问题，导致:hover伪类无法正常生效：

1. CSS选择器匹配逻辑错误 #

你写的 one:hover two 是后代选择器，它仅会匹配嵌套在<one>标签内部的<two>元素，但你的代码里<two>和<one>是同级的兄弟元素，这个选择器根本找不到目标。

要实现鼠标悬停在<one>上时显示同级的<two>，需要用相邻兄弟选择器+（匹配紧接在后面的第一个兄弟元素），如果需要匹配后面所有同级兄弟，也可以用通用兄弟选择器~，这里用+就足够满足需求。

2. 自定义标签的潜在兼容性问题（可选优化） #

虽然HTML允许使用自定义标签，但部分浏览器对这类标签的默认渲染规则可能存在差异。如果只是做简单的交互展示，建议用<div>、<span>这类标准标签替代自定义的<one>、<two>，当然如果坚持使用自定义标签，修正选择器后也能正常运行。

修正后的代码 #

保留自定义标签的版本 #

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style>
        two {
            display: none;
        }
        one {
            display: block;
            /* 增加样式让hover区域更直观 */
            padding: 8px;
            border: 1px solid #ccc;
        }
        /* 用相邻兄弟选择器匹配hover后的目标元素 */
        one:hover + two {
            display: block;
            margin-top: 8px;
            padding: 8px;
            border: 1px solid #eee;
        }
    </style>
  </head>
  <body>
      <one>Hello</one>
      <two>Hello</two>
  </body>
</html>

使用标准标签的优化版本 #

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style>
        .two {
            display: none;
        }
        .one {
            display: block;
            padding: 8px;
            border: 1px solid #ccc;
        }
        .one:hover + .two {
            display: block;
            margin-top: 8px;
            padding: 8px;
            border: 1px solid #eee;
        }
    </style>
  </head>
  <body>
      <div class="one">Hello</div>
      <div class="two">Hello</div>
  </body>
</html>

内容的提问来源于stack exchange，提问作者Etienne Balli