悬停关联锚点的iframe创建及遮挡锚点无法点击问题求助

1. 如何创建鼠标悬停时关联锚点的<iframe>标签？ #

要实现鼠标悬停时让<iframe>关联锚点，核心是动态修改iframe的加载目标——纯CSS无法直接操作iframe的src属性，必须用JavaScript实现：

• 给触发悬停的元素绑定mouseenter事件，在回调里修改iframe的src，带上指定锚点（格式为页面地址#锚点名）
• 若需要在鼠标离开时恢复初始状态，再绑定mouseleave事件重置src

示例代码：

<div class="hover-box">
  <iframe id="linked-iframe" frameborder="0"></iframe>
</div>

const hoverBox = document.querySelector('.hover-box');
const iframe = document.getElementById('linked-iframe');

// 鼠标悬停时加载带锚点的页面
hoverBox.addEventListener('mouseenter', () => {
  iframe.src = '你的页面地址.html#目标锚点';
});

// 鼠标离开时恢复原页面（可选）
hoverBox.addEventListener('mouseleave', () => {
  iframe.src = '初始页面地址.html';
});

2. 解决<iframe>遮挡内部<a>标签无法点击的问题 #

问题根源 #

你当前的代码存在两个关键问题：

1. z-index仅在元素设置position: relative/absolute/fixed时生效，你的所有元素都未加定位，因此调整z-index完全无效
2. <iframe>是独立的浏览上下文，默认会拦截鼠标点击事件，即便它在<a>内部，点击也会被iframe捕获，无法触发<a>的跳转

两种可行解决方案 #

方案一：让iframe不接收鼠标事件（无需修改DOM）

在hover状态下给iframe添加pointer-events: none，让点击事件穿透到下方的<a>标签，同时给相关元素加上定位让z-index生效：
修改后的CSS：

/* 给父元素和子元素添加定位，让z-index生效 */
.most_visited{
  position: relative;
}
.most_visited > a{
  position: relative;
  display: block; /* 让a标签包裹内部元素 */
}
.backgroun_iamge_pmv{
  position: relative;
}
.cv_embebed{
  position: relative; /* 新增定位 */
  align-self: center;
  width: 20.1em;
  height: 25em;
  margin-bottom: 2em;
  border: solid 2px red;
  border-radius: 1em;
  z-index: 1;
  opacity: 0.8;
}

.most_visited:hover > a > .cv_embebed{
  z-index: 0;
  transform: translateY(-25em);
  opacity: 0.8;
  pointer-events: none; /* 新增：让iframe不拦截点击 */
}

/* 保留原有其他hover样式 */
.most_visited:hover > a > .backgroun_iamge_pmv{
  background: linear-gradient(black, grey);
  width: 20.1em;
  height: 25em;
  border-radius: 1em;
}

方案二：调整DOM结构（更彻底）

把<iframe>移到<a>标签外面，避免iframe和<a>的层级冲突：
修改后的HTML：

<div class="most_visited">
  <a href="../../random/index.html">
    <div class="backgroun_iamge_pmv"></div>
  </a>
  <iframe class="cv_embebed" frameborder="0"></iframe>
</div>

调整后的CSS选择器：

.most_visited:hover > .cv_embebed{
  z-index: 0;
  transform: translateY(-25em);
  opacity: 0.8;
}

这样iframe和<a>是同级元素，hover时iframe的位移不会遮挡<a>的点击区域。

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