Question

I am creating a few links on my web page and I wanted to have an effect, like a change in the background or the size of the text seeming to grow up, whenever I hover over those links. The links are displayed like blocks.

---

html part

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

---

But even after the above whenever I hover over the links, nothing changes. Whats the mistake here ?

Answer 1

The CSS selector .leftimageslinks a:hover tries to select a link inside ‘.leftimageslinks’. Instead, try this:

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

http://jsfiddle.net/BGJJn/