为什么通用/通配符选择器上的悬停伪选择器似乎不适用？

问题描述 投票：0回答：1

最小可复制示例

<html>
	<head>
		<style>
			div {
				background-color: #F00;
			}
			* button {
				opacity: 0;
			}
			*:hover button {
				opacity: 1;
			}
		</style>
	</head>
	<body>
		<button>hello</button>
		<div>
			<button>world</button>
		</div>
	</body>
</html>

预期行为与实际行为

  • 我希望将鼠标悬停在红色div上时会出现带有文本“ world”的按钮。
  • 相反，我看不到效果。
  • 我在Chrome和Safari中的行为完全相同。
  • 有趣的是，在将以上内容制作为单独的HTML文件并在chrome / safari中运行之前，我在JSFiddle中尝试了确切的代码段，并且该代码段在此完美运行（相同的浏览器）。
  • 如果我将*:hover button行更改为div:hover button，则会得到预期的行为。

我的环境

  • Google Chrome-版本83.0.4103.97（正式版本）（64位）

  • MacOS Cataline-版本10.15.5

  • Safari版本13.1.1

我的问题

  • 这是Chrome和Safari的错误（似乎不太可能）
  • 失败以上，对于这种特殊情况下CSS的工作方式，我是否不了解？ （也许官方规格中不支持此用例？）
  • 如果是以上情况（为什么这样做在JSFiddle中起作用，但不能作为在chrome中打开的独立HTML文件。
css google-chrome safari wildcard pseudo-element
1个回答
0
投票

为此，信贷转到@TemaniAfif（请参阅问题中的评论）。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.