Question

我刚刚开始钻研HTML / CSS而且我遇到了问题。我试图将隐藏文字放在Spotify iFrame上，以便当我将鼠标悬停在iFrame上时，文字变得可见，iFrame变得略微透明。

这是我的代码：

HTML

<iframe source="..."></iframe>
<p class="hiddentext">Testing</p>

CSS

iframe{
  padding:20px;
  justify-content: center;
  width: 100%;
  margin: auto;
}

.hiddentext {
  position: absolute;
  top: 103px;
  left: 0;
  width: 100%;
  text-align: center;
  visibility: hidden;
  opacity: 0;
}

iframe:hover {
  opacity: 0.6;
}

iframe:hover .hiddentext {
  visibility: visible;
  opacity: 1;
}

当我尝试运行它时，iFrame变得透明，但文本不会出现。如果我将可见性设置为可见，并且在.hiddentext {}中将不透明度设置为1，则文本就在那里，因此我认为iframe存在问题：hover .hiddentext {}部分。请帮忙！

Answer 1

以这种方式添加:hover css

iframe:hover + .hiddentext {
  visibility: visible;
  opacity: 1;
}

https://jsfiddle.net/8wr8fa2p/

Answer 2

我试图改变你的代码

<style>
iframe {
      padding: 20px;
      text-align: center;
      width: 100%;
      margin: auto;
}
.hiddentext {
  position: absolute;
  top: 103px;
  left: 0;
  width: 100%;
  text-align: center;
  visibility: hidden;
  opacity: 0;
}    
iframe:hover {
  opacity: 0.6;
}    
#test:hover p {
  visibility: visible;
  opacity: 1;
}
</style>


<div id="test">
    <iframe src="http://www.w3schools.com"></iframe>
    <p class="hiddentext">Testing</p>
</div>

iFrame上的隐藏文字

2 个答案: