我是新來的，我會從一個特殊的問題開始：當用滑鼠懸停在 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 上時，如何在中間顯示文本？只有當帶有鏈接的框也出現時，它才會出現。希望可以有人幫幫我。
uj5u.com熱心網友回復：
#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>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/394451.html