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

Posted 2023-03-05

【中文标题】将鼠标悬停在 iframe 上时如何显示文本

【英文标题】：How to display text when hover over an 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 上时，如何在中间显示文本？只有当带有链接的框也出现时，它才会出现。 希望有人可以帮助我。

【参考方案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>

【讨论】：

感谢工作！