如何设置盒装链接的背景颜色？

我的网站上有一个带有边框的链接。

HTML:

<p id="hero4"><a href="menu.html">Explore our menu</a></p>

CSS:

#hero4 {
border:1px solid white;
border-radius:5px;
width:150px;
height:30px;
margin:auto;}

我希望当用户将鼠标悬停在整个“框”上时，它会变成灰色，就像星巴克网站上的“创建你的”按钮一样。现在，我有：

#hero4 a:hover {
background-color:grey;}

但只有文本周围的小矩形区域变成灰色。如何更改 CSS 以使边框内的整个区域改变颜色？

然后只需将悬停设置为#hero4:

#hero4:hover { /*removed a*/
   background-color:grey;
}

您可以使用:hover对于任何元素。