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

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

您使用了错误的选择器。