Ich habe einen Link auf meiner Website mit Rändern.

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

Ich möchte, dass die gesamte "Box" grau wird, wenn ein Benutzer mit der Maus darüber fährt, z. B. der "create yours" -Button auf der Starbucks-Website. Gerade habe ich

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

, aber nur der kleine rechteckige Bereich um den Text wird grau. Wie kann ich mein CSS so ändern, dass sich die Farbe des gesamten Bereichs innerhalb des Rahmens ändert?