当鼠标悬停时改变块链接的背景颜色

Question

我正在创建网页上的一些链接，希望在鼠标悬停在链接上时产生特效，例如背景变化或字体大小似乎变大。这些链接被显示为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;
}

但是即使进行了上述操作，当我悬停在链接上时，仍然没有任何变化。这里出了什么问题？

---

- OneMoreError

Answer 1

CSS选择器.leftimageslinks a:hover试图选择'.leftimageslinks'中的链接。请尝试使用以下代码：

.leftimageslinks:hover a

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

http://jsfiddle.net/BGJJn/

- Stephan Muller

---

您还可以使用a.leftimagelinks:hover来确保仅将悬停应用于包含类leftimagelinks的a标记。 - QQping

你可以这样做，但除非确实有必要，否则不建议这样做。请参阅此文章：http://csswizardry.com/2012/11/code-smells-in-css/ - Stephan Muller

Answer 2

请使用

.leftimagelinks:hover

您正在使用错误的选择器。

- Gurpreet Singh