我想创建一个 div，如果你将鼠标悬停在一侧，相反的文本就会消失。当悬停左侧文本时，它工作得很好，右侧文本按预期消失，但反之则不起作用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>choose</title>
<style>
.right:hover~.left p {
opacity: 0;
}
.left:hover~.right p {
opacity: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<p>This is left text.</p>
</div>
<div class="right">
<p>This is right text.</p>
</div>
</div>
</body>
</html>这是尽可能简化的代码。悬停一侧应该使另一文本的不透明度为零，但它不适用于两侧。我尝试了很多不同的方法都没有效果。
有什么解释可以解释为什么会发生这种情况吗？我认为它可能是 .js 或其他可能会产生干扰的 css 属性，但它简化到了这一点，但它仍然对我不起作用。
~:has()<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>choose</title>
<style>
.container:has(.left:hover) .right {
opacity: 0;
}
.container:has(.right:hover) .left {
opacity: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<p>This is left text.</p>
</div>
<div class="right">
<p>This is right text.</p>
</div>
</div>
</body>
</html>