你好,我想在鼠标悬停在按钮上后显示一个框架窗口
ul li div, ul li div iframe {
background-color: rgba(237, 239, 242,0.9);
margin-top: 50px;
opacity: 0;
}
.prayer-time:hover ~ div, div #prayerTime { opacity: 1 }
<ul class="upperUl">
<li> <a class="prayer-time" href="https://www.albayan.ae/prayer-time" target="_blank"> <b> Prayer Time </b> </a>
<div>
<iframe id="#prayerTime" src="https://www.albayan.ae/prayer-time" width="400" height="400" name="Prayer time">
</iframe>
</div>
</li>
谁能告诉我 (Oppacit:1) 的 css 第二选择有什么问题??
最佳答案
设置样式将 iframe
的 div 换成 iframe
ul li div, ul li .hide {
background-color: rgba(237, 239, 242,0.9);
margin-top: 50px;
opacity: 0;
}
.prayer-time:hover ~ .hide { opacity: 1 }
<ul class="upperUl">
<li> <a class="prayer-time" href="https://www.albayan.ae/prayer-time" target="_blank"> <b> Prayer Time </b> </a>
<div class="hide">
<iframe id="#prayerTime" src="https://www.albayan.ae/prayer-time" width="400" height="400" name="Prayer time">
</iframe>
</div>
</li>
关于css - 如何选择与 :hover 相邻的子元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53976806/