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

Question

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

#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 上时，如何在中间显示文本？它应该只在带有 link 的框也出现时才会出现。希望有人能帮助我。

Answer 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>

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

How to display text when hover over an iframe

html

css

iframe

web