如何让div与内部a标签hover时同步触发样式效果？

需要让包含a标签的div按钮在hover时，div和内部的a标签同步变色，形成整体按钮的hover效果。当前代码中hover div时只有div样式变化，内部a标签无同步反应，无法实现整体联动。

原始代码 #

HTML代码 #

<div id="b1"; class = b>
    <a href="test.html">BUY</a>
</div>

<div id="b2"; class = b>
    <a href="test.html">BUY</a>
</div>

<div id="b3"; class = b>
    <a href="test.html">BUY</a>
</div>

CSS代码 #

a:visited{
    color: white
}
a:hover:visited{
    color: rgb(180, 179, 179);
}

a:link{
    color: white;
    background-color:  rgb(180, 179, 179);
}
a:hover{
    color: rgb(180, 179, 179);   
    background-color: white    
}

div.b{
    color:  white;
    background-color: rgb(180, 179, 179);
}

div.b:hover{
    color: rgb(180, 179, 179);   
    background-color: white    
}
a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
a:active { text-decoration: none; }

解决方案 #

修正后的HTML代码 #

先修复HTML语法错误：移除div标签内多余的分号，给class属性值添加引号

<div id="b1" class="b">
    <a href="test.html">BUY</a>
</div>

<div id="b2" class="b">
    <a href="test.html">BUY</a>
</div>

<div id="b3" class="b">
    <a href="test.html">BUY</a>
</div>

修正后的CSS代码 #

核心是通过div.b:hover a选择器，在div hover时控制内部a标签的样式，同时简化重复样式，确保hover时div和a完全同步：

/* 统一移除a标签下划线 */
a {
    text-decoration: none;
}

/* 默认状态：div和a样式统一 */
div.b {
    color: white;
    background-color: rgb(180, 179, 179);
    /* 可选优化：让按钮更美观，添加内边距、行内块显示、指针光标 */
    padding: 8px 16px;
    display: inline-block;
    cursor: pointer;
}
div.b a {
    color: inherit; /* 继承div的文字颜色 */
    background-color: transparent; /* 取消a自身背景色，避免覆盖div */
}

/* hover状态：div和内部a同步变色 */
div.b:hover {
    color: rgb(180, 179, 179);
    background-color: white;
}
div.b:hover a {
    color: inherit; /* 继承hover状态下div的文字颜色 */
}

/* 处理a标签visited状态，确保访问后样式仍统一 */
div.b a:visited {
    color: inherit;
}

关键说明 #

1. 修复HTML语法错误：class属性值必须用引号包裹，移除多余分号，避免浏览器解析异常。
2. 让a标签继承div颜色：通过color: inherit，确保a的颜色始终和父div保持一致，无需单独设置link/visited的颜色。
3. 取消a标签自身背景色：避免a的背景色覆盖div的背景，保证整体视觉统一。
4. 使用div.b:hover a选择器：当div被hover时，强制修改内部a的样式，实现同步变色，解决之前hover时a样式不联动的问题。

内容的提问来源于stack exchange，提问作者Joris Laurinavičius