如何选择与 :hover 相邻的子元素答案

【问题标题】：How to select a child element that is neighbor to :hover如何选择与 :hover 相邻的子元素
【发布时间】：2023-12-18 18:56:01
【问题描述】：

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

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>

谁能告诉我 css second selection for (Oppacit:1) 有什么问题？？

【问题讨论】：

当鼠标离开时隐藏它？
使用当前代码，我只能在将鼠标悬停在按钮上时看到 div，但看不到 iframe 元素的内容！！
你需要在第二个选择器上添加悬停

标签： css iframe hover selection

【解决方案1】：

设置样式以包裹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>

【讨论】：

告诉我更多帮助