Hi,

I want to be able to have a link inside a border, which in turn has a background image. How would I be able to make the whole image area clickable with hover? I have Googled but can not find the answer. Thanks.

 

HTML

<li class="link1"><a href="http://www.google.com">Google</a></li>

 

CSS

.link1{

background-image:url(image.png);

display:block;

margin-top:5px;

border:1px solid black;

height:100px;

width:100px;

}

Apply the class and styling to the A tag instead...

 

<li><a href="http://www.google.com" class="link1">Google</a></li>
 

 

Apply the class and styling to the A tag instead...

 

<li><a href="http://www.google.com" class="link1">Google</a></li>
 

Thanks for a quick reply and answer. That worked thanks again

.link1 a {
background-image:url(image.png);
display:block;
margin-top:5px;
border:1px solid #000;
height:100px;
width:100px;
}

.link1 a:hover {
background-image:url(image.png); /*rollover image*/
}

Edited July 15, 201412 yr by allen180