如何使链接和div元素同时激活?

Question

当我将鼠标悬停在div元素上时，只有它会亮，而链接不会亮。有没有办法让按钮作为一个亮，而不是按钮的背景，然后链接。

<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>

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; }

我尝试了所有我知道的

Answer 1

试试

.b:hover {
background: #ccc;
}
.b:hover a {
background: green;
}
/* or */
.b a:hover {
color: red;
}

https://codepen.io/roma3z/pen/QWxapdB