如何使用CSS实现鼠标悬停时隐藏页面元素？

你的代码存在两处关键问题导致功能失效，以下是修正后的完整代码及问题说明：

修正后的代码 #

HTML #

<!DOCTYPE html>
<html>
<head>
    <style>
        .page-content {
            display: block;
        }

        .banner-content {
            display: none; /* 修正语法错误：添加属性冒号 */
        }

        /* 使用通用兄弟选择器匹配同级元素 */
        .banner-button:hover ~ .banner-content {
            display: block;
        } 
        .banner-button:hover ~ .page-content {
            display: none;
        }
    </style>
</head>
<body>
    <div class="banner-button">hover button</div>
    <div class="banner-content">banner</div>
    <div class="page-content">page content</div> <!-- 悬停时隐藏此元素 -->
</body>
</html>

关键修改点 #

1. CSS语法修正：.banner-content中的display none缺少属性冒号，正确写法是display: none;，语法错误会导致样式完全不生效。
2. 选择器逻辑修正：你原代码使用的.banner-button:hover .banner-content是匹配按钮内部的子元素，但HTML里.banner-content和.page-content都是按钮的同级元素，因此需要用**通用兄弟选择器（~）**来选中hover状态下的兄弟元素。

如果你的触发元素是图片（你描述中提到的图片），只需将.banner-button替换为图片标签即可，示例：

<img src="你的图片路径" class="banner-button" alt="hover trigger">

内容的提问来源于stack exchange，提问作者user14989475