I attempted to create divs in which hovering over one side would cause the opposite text to disappear. The functionality works flawlessly when hovering over the left text, as the right text disappears as intended. However, it is not working in the reverse manner.
<!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>This code has been simplified to the maximum extent possible. Hovering over one side should make the other text's opacity zero, but this behavior is only functioning on one side. Although I have attempted various approaches, the issue persists.
Wondering if there are any reasons why this might be occurring? I speculated that JavaScript or other CSS properties could be causing interference, but even after simplifying to this point, the desired effect has not been achieved.