如何用JS或CSS实现hover时显示低透明度iframe tooltip交互效果

问题根源 #

你遇到的show按钮半透明异常，是因为点击事件里document.getElementById("wrapperAd").querySelector(":hover")获取到的是当前正被点击的#showcat按钮本身，半透明效果被错误应用到了按钮上，而非目标iframe。同时原有逻辑没有区分hover预览、点击全显两种状态，导致交互不符合预期。

修改代码 #

1. JavaScript 完全替换原有JS逻辑即可 #

// 缓存DOM节点避免重复查询，提升性能
const xout = document.getElementById("xout")
const adlike = document.getElementById("adlike")
const showcat = document.getElementById("showcat")
// 标记iframe是否为点击激活的全显状态
let isIframeActive = false

// 关闭按钮逻辑
xout.addEventListener("click", function() {
  xout.style.display = "none"
  adlike.style.display = "none"
  showcat.style.display = "block"
  isIframeActive = false
  adlike.style.opacity = "1" // 重置透明度避免状态残留
})

// show按钮hover预览逻辑
showcat.addEventListener("mouseenter", function() {
  if (!isIframeActive) {
    adlike.style.display = "block"
    adlike.style.opacity = "0.5"
  }
})
showcat.addEventListener("mouseleave", function() {
  if (!isIframeActive) {
    adlike.style.display = "none"
    adlike.style.opacity = "1"
  }
})

// show按钮点击全显逻辑
showcat.addEventListener("click", function() {
  isIframeActive = true
  adlike.style.display = "block"
  adlike.style.opacity = "1"
  xout.style.display = "block"
  showcat.style.display = "none"
})

2. CSS 无需大幅修改，仅补充2条规则避免层级冲突即可 #

/* 新增规则，保证iframe默认状态下正常显示 */
#adlike {
  z-index: 10;
}
/* 按钮层级更高，保证能正常触发hover、点击事件 */
#showcat {
  z-index: 20;
}

3. HTML 可选优化 #

你原有HTML末尾多了一个冗余的</div>标签，删除即可避免潜在布局异常。

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