ASP.NET C#中按钮悬停联动变色功能失效求助

你猜的没错！问题核心就出在CSS选择器的作用范围上。你用的~兄弟选择器只能选中同一父元素下的直接兄弟节点，但btnSpa被包裹在.superleft容器里，而Pro1/Proii/Proiii分别在.left/.leftt/.leftdown这些独立容器中——它们的父元素都是.container，但彼此并不是直接的兄弟节点，所以你的CSS规则根本无法命中目标按钮。

下面给你两个可行的解决方案：

方案1：JavaScript实现（无需调整DOM结构） #

这个方案最灵活，不需要改动现有HTML结构，通过监听btnSpa的鼠标事件直接控制目标按钮样式：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"/>
    <style>
        .custom_button {
            background-color: black;
            color: white;
            padding: 10px 10px;
            border: 1px solid black;
            text-decoration: none;
        }
        /* 新增hover状态类，方便JS控制 */
        .btn-hovered {
            background-color: white;
            color: black;
            padding: 10px 10px;
            border: 1px solid black;
            text-decoration: none;
        }
        /* 原有布局样式保持不变 */
        .container { height: 200px; position: relative; border: 3px solid green; }
        .superleft { margin: 0; position: absolute; top: 50%; left: 10%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
        .left { margin: 0; position: absolute; top: 25%; left: 25%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
        .leftt { margin: 0; position: absolute; top: 50%; left: 25%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
        .leftdown { margin: 0; position: absolute; top: 75%; left: 25%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
        .middletop { margin: 0; position: absolute; top: 25%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
        .middle { margin: 0; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
        .middledown { margin: 0; position: absolute; top: 75%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div class="container">
            <div class="superleft">
                <asp:Button ID="btnSpa" runat="server" class="custom_button" Text="SPA"/>
            </div>
            <div class="left">
                <asp:Button ID="btnPro1" runat="server" class="custom_button" Text="Pro1" />
            </div>
            <div class="leftt">
                <asp:Button ID="btnProii" runat="server" class="custom_button" Text="Proii"/>
            </div>
            <div class="leftdown">
                <asp:Button ID="btnProiii" runat="server" class="custom_button" Text="Proiii"/>
            </div>
            <div class="middletop">
                <asp:Button ID="btnPro2" runat="server" class="custom_button" Text="Pro2" />
            </div>
            <div class="middle">
                <asp:Button ID="btnPro2i" runat="server" class="custom_button" Text="Pro2i" />
            </div>
            <div class="middledown">
                <asp:Button ID="btnPro2ii" runat="server" class="custom_button" Text="Pro2ii" />
            </div>
        </div>
    </form>
    <script>
        // 获取目标元素
        const btnSpa = document.getElementById('btnSpa');
        const targetButtons = [
            document.getElementById('btnPro1'),
            document.getElementById('btnProii'),
            document.getElementById('btnProiii')
        ];

        // 鼠标悬停时添加样式类
        btnSpa.addEventListener('mouseover', () => {
            targetButtons.forEach(btn => btn.classList.add('btn-hovered'));
        });

        // 鼠标离开时移除样式类
        btnSpa.addEventListener('mouseout', () => {
            targetButtons.forEach(btn => btn.classList.remove('btn-hovered'));
        });
    </script>
</body>
</html>

方案2：纯CSS实现（微调触发区域） #

如果不想用JS，可以把hover事件绑定到btnSpa所在的.superleft容器上，利用兄弟选择器控制后续目标容器里的按钮。注意：这个方案下，鼠标悬停在.superleft的空白区域也会触发样式变化，如果你能接受这个小差异，会比JS方案更简洁：

/* 替换你原有的hover规则，其他样式保持不变 */
.superleft:hover ~ .left .custom_button,
.superleft:hover ~ .leftt .custom_button,
.superleft:hover ~ .leftdown .custom_button {
    background-color: white;
    color: black;
    padding: 10px 10px;
    border: 1px solid black;
    text-decoration: none;
}

原理是：.superleft和.left/.leftt/.leftdown是同一父元素（.container）下的兄弟节点，所以可以用~选择器选中它们，再深入到内部的.custom_button元素。

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