使用styled-components为a标签添加hover效果时内部子元素均被触发如何解决

问题原因 #

1. CSS选择器写法错误：你在ul的样式嵌套中写的& :hover中间存在空格，该写法会匹配ul的所有后代元素的hover状态，而非你预期的单个跳转容器的hover状态，因此只要悬停到a、li、i任意子元素上，都会触发阴影效果，看起来就像所有子元素同步应用了样式。
2. HTML结构不规范：<ul>的直接子元素只能是<li>，你当前将<a>作为<ul>的直接子节点，还为<li>添加了仅<a>支持的href属性，不符合HTML语义规范，也会导致样式选择器匹配异常。
3. hover效果挂载对象错误：你想要的是鼠标悬停在整个跳转容器上时添加阴影，应该把hover效果挂载到<a>元素本身，而不是全局挂载到ul的所有后代上。

修复方案 #

第一步：修正JSX结构 #

先调整为符合HTML语义的结构，ul仅嵌套li，跳转内容全部放在li内的a标签中：

<Section>
  <PortLogin>
    <h1>Welcome to Your Professional Community</h1>
    <ul>
      <li>
        <a href="##">
          <span>Search For a job</span>
          <i className="fas fa-chevron-right"></i>
        </a>
      </li>
      <li>
        <a href="##">
          <span>Find a Person You Know</span>
          <i className="fas fa-chevron-right"></i>
        </a>
      </li>
      <li>
        <a href="##">
          <span>Learn a new skill</span>
          <i className="fas fa-chevron-right"></i>
        </a>
      </li>
    </ul>
  </PortLogin>
  <img src="Img/SectionImg.svg" alt="Img Section" />
</Section>

第二步：调整styled-components样式 #

删除错误的全局hover规则，把hover效果直接挂载到a元素上：

const Section=styled.div`
  display: flex;
  justify-content: start;
  flex-wrap:wrap;
  margin-top: 40px;

  & img{
    width: 500px;
    position: absolute;
    right: 0;
  }
`;

const PortLogin=styled.div`
  margin-top: 25px;
  display:flex;
  flex-direction:column;
  justify-content:space-around;

  & ul{
    margin-top:50px;
    padding: 0;
    list-style: none;
  }

  & ul > li {
    margin-bottom: 20px;
  }

  & ul > li > a{
    text-decoration:none;
    padding: 25px 20px;
    width:70%;
    display: flex;
    justify-content:space-between;
    border: 1px solid #d3cccc;
    border-radius: 13px;
    font-size: larger;
    color: black;
    /* &与:hover之间无空格，仅匹配当前a元素的悬停状态 */
    &:hover {
      box-shadow: 3px 3px 8px 2px #00000040;
    }
  }
`

核心修改点 #

• 修正HTML语义结构，避免选择器匹配异常
• 把原本写在a标签上的margin-bottom移到li标签上，避免容器间距区域悬停不触发效果
• 删除冗余的li子元素a的样式规则，统一在a的选择器中定义样式
• 修复hover选择器的空格问题，将阴影效果直接绑定到a标签本身，仅在悬停对应跳转容器时触发效果

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