如何设置盒装链接的背景颜色？ [英] How to set background color for a boxed link?

问题描述

我的网站上有包含边框的链接。

HTML：

I have a link on my website with borders.

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

我想整个盒子当用户将鼠标悬停在其上时，例如星巴克网站上的创建您的按钮。现在，我有：

I'd like the entire "box" to turn grey when a user hovers over it, like the "create yours" button on the Starbucks website. Right now, I have:

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

，但只有文本周围的小矩形区域变成灰色。

but only the small rectangular area around the text turns grey. How can I change my CSS so the entire area within the border changes color?

推荐答案

您可以将样式从<$标记，并将其设置为 display：block。< p> ; 。

You can move the style from the <p> into the <a> tag, and also set it to display:block;.

#hero4 a {
  border: 1px solid blue;
  border-radius: 5px;
  width: 150px;
  height: 30px;
  margin: auto;
  display: block; /*added*/
  text-align: center; /*extra: center text horizontally*/
  line-height: 30px; /*extra: center text vertically*/
}
#hero4 a:hover {
  background-color: grey;
}

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

这篇关于如何设置盒装链接的背景颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！