如何仅让链接作用于第一个div元素且保留原有CSS效果？

方法1：用CSS阻止第二个div的点击事件（无需修改HTML结构） #

直接给#div1info添加pointer-events: none，让它不响应任何鼠标事件（包括点击），这样只有第一个div能触发a标签的跳转，同时原有的hover显示效果完全保留。

修改后的CSS：

#div1 {
  width: 15em;
  height: 25em;
  background-color: rgb(214, 214, 214);
  border-radius: 5px;
  position: fixed;
}

#div1info {
  width: 30em;
  height: 25em;
  background-color: rgb(0, 0, 0);
  border-radius: 5px;
  opacity: 0;
  margin-left: 16em;
  transition: 1s;
  pointer-events: none; /* 新增该行 */
}

#div1:hover+#div1info {
  width: 30em;
  height: 25em;
  background-color: rgb(10, 9, 9);
  border-radius: 5px;
  opacity: 100%;
  margin-left: 16em;
  transition: 1s;
}

HTML保持原样即可，点击#div1会触发跳转，点击#div1info无反应，hover显示效果正常。

方法2：微调HTML结构（更符合语义化） #

把a标签仅包裹#div1，调整CSS选择器，利用a标签的hover状态触发#div1info的显示，让a标签只包含可点击的交互元素，结构更合理。

修改后的HTML：

<body>
  <a href="#">
    <div id="div1"></div>
  </a>
  <div id="div1info"></div>
</body>

修改后的CSS：

#div1 {
  width: 15em;
  height: 25em;
  background-color: rgb(214, 214, 214);
  border-radius: 5px;
  position: fixed;
}

#div1info {
  width: 30em;
  height: 25em;
  background-color: rgb(0, 0, 0);
  border-radius: 5px;
  opacity: 0;
  margin-left: 16em;
  transition: 1s;
}

/* 替换原选择器，通过a的hover触发相邻元素显示 */
a:hover + #div1info {
  opacity: 100%;
  background-color: rgb(10, 9, 9);
}

此方案既保留hover显示效果，又保证只有#div1可触发跳转，语义化更规范。

方法3：用JavaScript/jQuery控制点击行为 #

如果需要给#div1info添加其他交互，可通过JS阻止它触发a标签的跳转。

原生JS版本： #

<body>
  <a href="#" id="link">
    <div id="div1"></div>
    <div id="div1info"></div>
  </a>

  <script>
    document.getElementById('div1info').addEventListener('click', function(e) {
      e.stopPropagation(); // 阻止事件冒泡到a标签
      e.preventDefault(); // 阻止默认跳转行为
    });
  </script>
</body>

jQuery版本： #

<body>
  <a href="#" id="link">
    <div id="div1"></div>
    <div id="div1info"></div>
  </a>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $('#div1info').on('click', function(e) {
      e.stopPropagation();
      e.preventDefault();
    });
  </script>
</body>

该方案适合需要给#div1info添加额外点击交互的场景，同时避免触发a标签跳转。

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