让<a></a>标签背景色在鼠标悬停时全宽变化

如何让<a></a>标签在鼠标悬停时，背景色从黑色变为红色，并且背景色填充整个<a></a>标签的宽度？

解决方案

关键在于设置<a></a>标签的显示方式和宽度。 使用display: inline-block; 将<a></a>标签设置为内联块元素，这样它既可以像块级元素一样设置宽度和高度，又可以像内联元素一样在文本流中排列。 然后，设置合适的宽度即可。

示例

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

以下CSS代码展示了如何实现：

<code class="css">a {
  display: inline-block;
  width: 100%; /* 或者设置具体像素宽度 */
  background-color: black;
  padding: 10px; /* 可选：添加内边距 */
  text-decoration: none; /* 可选：去除下划线 */
  color: white; /* 可选：设置文本颜色 */
  transition: background-color 0.3s ease; /* 可选：添加过渡效果 */
}

a:hover {
  background-color: red;
}</code>

这段代码将<a></a>标签的背景色设置为黑色，并在鼠标悬停时将其更改为红色。width: 100%; 确保背景色填充父元素的整个宽度。 transition 属性添加了平滑的过渡效果。 你可以根据需要调整宽度、内边距和颜色。 如果<a></a>标签的父元素宽度未定义，则需要为父元素设置宽度或使用其他布局方法。

记住，如果<a></a>标签的父元素宽度没有被明确设置，那么width: 100%; 将使其占据其父元素的全部可用宽度。 如果父元素的宽度是自动计算的，那么<a></a>标签的宽度也将会是自动计算的，可能不会填充整个屏幕宽度。