Hi there, please take your time to answer my question. I’ve seen in the stats for this website that people arrive here through Google by searching for best-answers.com.

How does this come to be? You search for this domain name? Google Instant gives you the idea? Please leave a comment and enlighten me.

Sometimes you’d like to make a whole div act as a link and give it some effects when someone hovers over it.

As an example we’ll use the 3 links on this page.

This can be achieved by using CSS. Because the desired effect is achieved by hovering the cursor over a link, it’s easy to think that it has something to do with [a:hover]. Chaning the background color and/or image with [a:hover] will result in example box 1. If you take a look, you’ll notice that only the background of the text changes.

It’s common practice to use [display:block] in order to fill the whole div with the desired background color while hovering over it. But if you set a [display:block] in [a:hover], you’ll discover the desired effects only take place if you hover exactly over the text link. Besides that, it doesn’t even work at all in Google Chrome. None of the desired effects take place while hovering the link in Chrome. This is the case for example box 2.

What we want to do is to get the background to change while hovering over the div and not just while hovering the text link itself. Besides that, we also would like it to work in Chrome! The way to do it is by adding [display:block] to [a] instead of to [a:hover]. This is the case in example box 3.

Below is the CSS code that goes with the example that I used in this post. Take a look at it and the example and you’ll figure it out.

I hope this helps you out a bit with the problem you are having and would appreciate some feedback


/* CSS code for box 1 */
#box1 {
font-weight: bold;
width: 100px;
height: 30px;
background-color: #ff0000;
text-align: center;
}

#box1 a {
height: 30px;
color: #ffff00;
text-decoration: none;
}

#box1 a:hover {
height: 30px;
color: #ffffff;
background-color: #000000;
}

/*CSS code for box 2 */
#box2 {
font-weight: bold;
width: 100px;
height: 30px;
background-color: #ff0000;
text-align: center;
}

#box2 a {
height: 30px;
color: #ffff00;
text-decoration: none;
}

#box2 a:hover {
height: 30px;
color: #ffffff;
background-color: #000000;
display: block;            /*Here's the block*/
}

/* CSS code for box 3 */
#box3 {
font-weight: bold;
width: 100px;
height: 30px;
background-color: #ff0000;
text-align: center;
}

#box3 a {
height: 30px;
color: #ffff00;
text-decoration: none;
display: block;            /*And here's where we want to have it*/
}

#box3 a:hover {
height: 30px;
color: #ffffff;
background-color: #000000;
}