html - iFrame 上的隐藏文本

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/