Question

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

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以使边框内的整个区域变色？

Answer 1

然后将悬停设置为SELECT c.FIRSTNAME || ' ' || c.LASTNAME as CUSTOMER, o.ORDERDATE FROM CUSTOMER c LEFT JOIN ORDERS o ON c.CUSTOMERID = o.CUSTOMERID WHERE o.orderdate >= SYSDATE - INTERVAL '30' DAY AND o.orderdate <= SYSDATE：

#hero4

您可以对任何元素使用#hero4:hover { /*removed a*/ background-color:grey; }。

Answer 2

您可以将样式从<p>移至<a>标记，并将其设置为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>

Answer 3

请勿将鼠标悬停在锚标记 a 上，而是将其用于段落标记 p ，因为 p 是其父项锚标记。

<强>代码

void service_GetProductTypeCompleted(object sender, GetProductTypeCompletedEventArgs e)
{
    if (e.Result.Count != 0)
    {
        productTypes = e.Result.ToList();
        cboProductType.DataContext = productTypes;
    }
}

EXAMPLE FIDDLE

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

3 个答案: