如何仅用CSS实现悬停链接时改变Div背景？代码问题排查

我来帮你排查问题并搞定这个需求～你的代码里有几个关键问题导致样式不生效，我一步步拆解：

核心问题分析 #

1. 重复ID使用：同一个页面里ID必须是唯一的，你写了两个id="test"和id="test1"，浏览器只会匹配第一个元素，后面的都不会生效。
2. 选择器错误：你用的~是兄弟选择器，只能选中同一个父元素下的兄弟元素，但#test1是<a>的子元素，不是兄弟，所以这个选择器完全没用；而#test:hover>#test1本来逻辑是对的，但因为重复ID导致失效。
3. 冗余标签：<img>是自闭合标签，不需要写</img>，而且你最后多了一个多余的</div>，会破坏HTML结构。

修正后的完整代码 #

HTML部分（替换重复ID为class） #

<div class="row">
  <div class="col-md-12" style="margin-left: 40px; margin-top: 5px;">
    <a class="test-link" href="#">
      <div class="col-xs-2 button-left target-div">
        <img class="button-img" src="{{ asset('/img') }}">
      </div>
      <div class="col-xs-5 button-right">
        <h3 style="margin-top: 10px; text-align: center;">@lang('main.data')</h3>
      </div>
    </a>
  </div>
</div>
<div class="row">
  <div class="col-md-12" style="margin-left: 40px; margin-top: 5px;">
    <a class="test-link" href="#">
      <div class="col-xs-2 button-left target-div">
        <img class="button-img" src="{{ asset('/img') }}">
      </div>
      <div class="col-xs-5 button-right">
        <h3 style="margin-top: 10px; text-align: center;">@lang('main.data')</h3>
      </div>
    </a>
  </div>
</div>

CSS部分（放在<style>标签或外部CSS文件中） #

/* 鼠标悬停在a标签时，修改它的直接子元素.target-div的背景色 */
.test-link:hover > .target-div {
  background-color: red;
}

为什么这样能生效？ #

• 把重复的ID换成class后，每个<a>和对应的子Div都能被正确选中，不会出现只匹配第一个元素的问题。
• 子选择器>精准选中了<a>的直接子元素.target-div，当鼠标悬停在<a>上时，这个子Div就会应用背景样式。
• 去掉了冗余标签，保证HTML结构正确，浏览器能正常解析样式。

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