悬停时更改块链接的背景颜色答案

【问题标题】：Changing background color of a block link on hovering悬停时更改块链接的背景颜色
【发布时间】：2012-11-11 00:46:19
【问题描述】：

我正在我的网页上创建一些链接，并且我想要产生一种效果，例如当我将鼠标悬停在这些链接上时，背景的变化或文本的大小似乎变大了。链接显示为blocks。

html部分

<div>
   <a class="leftimagelinks" href="#">Submit a paper</a><br>
   <a class="leftimagelinks" href="#">Get the brochure</a><br>
   <a class="leftimagelinks" href="#">Housing and travel</a>
</div>

css 部分

.leftimagelinks {
margin: auto;
display: block;
width: 190px;
height: 25px;
border-radius: 8px;
text-align: center;
padding: 4px;
color: yellow;
background-color: black;
background-color: #32CD32;
}

.leftimagelinks a:hover{
background-color: red;
}

但即使经过上述操作，每当我将鼠标悬停在链接上时，也没有任何变化。这里有什么错误？

【问题讨论】：

标签： html css hover background-color

【解决方案1】：

CSS 选择器.leftimageslinks a:hover 尝试选择“.leftimageslinks”内的链接。相反，试试这个：

.leftimagelinks:hover{
  background-color: red;
}

http://jsfiddle.net/BGJJn/

【讨论】：

您也可以使用a.leftimagelinks:hover确保悬停只适用于包含leftimagelinks类的a-tags。
可以，但除非确实需要，否则建议不要这样做。见这篇文章：csswizardry.com/2012/11/code-smells-in-css

【解决方案2】：

使用

.leftimagelinks:hover

您使用了错误的选择器。

【讨论】：