Hi,

I would like the background colour of my links to change on hover.
However, I don't want this effect on images. The background colour should not change when you hover over them.
How can I achieve this?

I tried targeting images like with a:hover img, but I still see a blue line along the bottom edge when I hover over them.

Here's a bare-bones example to illustrate my problem:

HTML Code:
<!DOCTYPE HTML>
<html dir="ltr" lang="de-DE">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Cat</title>
    <style>
      a:hover{background-color:#AFD6FF;}
      a:hover img{background-color:transparent;}
    </style>
  </head>

  <body>
    <p><a href="">Text</a></p>
    <a href="#" rel="lightbox[11]">
      <img src="http://www.petfinder.com/wp-content/uploads/2012/11/99059361-choose-cat-litter-632x475.jpg" />
    </a>
  </body>
</html>
Thanks in advance.