html - ホバリング時にブロックリンクの背景色を変更する

Question

私は自分のWebページにいくつかのリンクを作成していますが、それらのリンクにカーソルを合わせるたびに、背景の変更やテキストのサイズが大きくなっているように見えるなどの効果が必要でした。リンクはのように表示されます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

間違ったセレクターを使用しています。