Changing the background color of a block link when it hangs

Question

I am creating several links on my web page, and I wanted to have an effect, such as changing the background or the size of the text, which seems to grow whenever I link to them. Links are displayed as 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 hang over links, nothing changes. What is the mistake here?

Answer 1

CSS selector .leftimageslinks a:hover tries to select a link inside '.leftimageslinks'. Instead, try the following:

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

http://jsfiddle.net/BGJJn/

Answer 2

Use

 .leftimagelinks:hover 

You are using the wrong selector.