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 part

.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

您使用了错误的选择器。

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

2 个答案: