css - 如何选择与 :hover 相邻的子元素

标签 css iframe hover selection

你好,我想在鼠标悬停在按钮上后显示一个框架窗口

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/

相关文章:

javascript - 如何动态创建 Javascript/Jquery 事件?

html - 为什么我的下拉菜单在使用视差时不能正常工作?

CSS 左属性

javascript - 试图让 iframe 出现在悬停时

iframe - 如何使用 headless chrome 获取带有 puppeteer 的 Iframe 的内部 Html?

javascript - 关闭Iframe模态框后刷新父页面

html - 即使我有正确的设置,@import 似乎也不起作用

html - div 旁边的 3 行文本问题

hover - ECharts - 如何防止在悬停时更改背景颜色

objective-c - NSTableView 中具有悬停效果的可点击文本