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

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

---

但是,即使在我将鼠标悬停在链接上面之后,也没有任何变化.这里的错误是什么？

Answer 1

CSS选择器.leftimageslinks a:hover尝试在".leftimageslinks"中选择一个链接.相反,试试这个:

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

http://jsfiddle.net/BGJJn/

Answer 2

使用

.leftimagelinks:hover

您使用了错误的选择器.