将鼠标悬停在 iframe 上时如何显示文本答案

【问题标题】：How to display text when hover over an iframe将鼠标悬停在 iframe 上时如何显示文本
【发布时间】：2022-01-21 10:53:15
【问题描述】：

我是新来的，首先要问一个特殊的问题：当用鼠标悬停在 iframe 上时，应该会出现一个带有文本的透明框，单击它会打开一个链接。否则，它应该保持隐藏状态。带有链接的透明框已使用此代码：

#frame {
  width: 600px;
  height: 330px;
  border: none;
  -moz-transform-origin: 0 0;
  position: relative;
  z-index: 1;
}

#link {
  width: 600px;
  height: 330px;
  background: none;
  position: relative;
  display: block;
  margin-top: -338px;
  z-index: 2;
}

#link:hover {
  background: rgba(255, 255, 255, 0.45);
}

<iframe id="frame" src="https://www.google.de" scrolling=no>
    </iframe>
<a id="link" href="https://www.youtube.com" target="_blank"></a>

但是，当我将鼠标悬停在 iframe 上时，如何在中间显示文本？只有当带有链接的框也出现时，它才会出现。希望有人可以帮助我。

【问题讨论】：

标签： html css web iframe

【解决方案1】：

#frame {
  width: 600px;
  height: 330px;
  border: none;
  -moz-transform-origin: 0 0;
  position: relative;
  z-index: 1;
}
    
    #frame:hover + #link {
      opacity: 1;
    }

#link {
  width: 600px;
  height: 330px;
  background: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  opacity: 0;
}

#link:hover {
  background: rgba(255, 255, 255, 0.45);
  opacity: 1;
}

  <iframe id="frame" src="https://www.google.de" scrolling=no>
    </iframe>
<a id="link" href="https://www.youtube.com" target="_blank">Click here</a>

【讨论】：

感谢工作！