Correct way to use :hover on a <DIV> as a link

HTML & CSS
1

Not sure if I’ve phrased that very well.

To show what I mean, have a look at this page:

http://www.goodsafariguide.net/lodges/

Basically, if you mouse over any of the country panels, that is using HTML of the form:

<div id="row_one">
    <a href="../botswana/"><div id="row_one_left"></div></a>
    <a href="../malawi/"><div id="row_one_right"></div></a>
    <a href="../kenya/"><div id="row_one_middle"></div></a>
    <br style="clear:both; height:0; font-size:1px; line-height:0px" />
</div>

And this CSS:

#outerWrapper #contentWrapper #row_one #row_one_left {
    width: 290px;
    height:140px;
    padding:10px;
    float:left;
    margin: 0 0 0 0;
    background-color:#FCF3D8;
    background-image:url(../images/countries/_panels/botswana_2013.jpg);
    background-repeat:no-repeat;
}
#outerWrapper #contentWrapper #row_one #row_one_left:hover{
    background-position: -310px 0px;
}

It has always worked, but I’ve always had a suspicion that its bad code (it certainly doesn’t validate.)

If anyone could suggest an alternative to achive the same effect, ie have the rollover links using CSS that would be much appreciated!

Thanks.

2

In XHTML 1.0 Strict this is 100% not semantic, I would advise that you remove the <div> elements completely from your markup and apply your CSS backgrounds directly to the anchor elements as they don’t have any specific styles set on them. If you do get rid of the <div> elements I would then recommend you put real text inside the anchor elements and use something like text-indent: -9999px so search engines are able to understand where the page is going to.

3

Thanks Chris. That makes sense, and is more obvious than I realised.

I’ve changed that now, and its mostly OK, although the middle columns aren’t quite working with the same CSS.

I’ve changed the HTML to:


<div id="row_one">
      <a href="../botswana/" class="row_one_left">Click to View Lodges in Botswana</a>
      <a href="../malawi/" class="row_one_right">Click to View Lodges in Malawi</a>
      <a href="../kenya/" class="row_one_middle">Click to View Lodges in Kenya</a>
      <br style="clear:both; height:0; font-size:1px; line-height:0px" />	
</div>

And the CSS to:


.row_one_left {
  	width: 290px;
	height:140px;
	padding:10px;
	float:left;
	margin: 0 0 0 0;
 	background-color:#FCF3D8;
   	background-image:url(../images/countries/_panels/botswana_2013.jpg);
   	background-repeat:no-repeat;
	text-indent: -9999px;
}
.row_one_left:hover{
  	background-position: -310px 0px;
}
.row_one_right {
  	width: 290px;
	height:140px;
	padding:10px;
	float:right;
	margin: 0 0 0 0;
 	background-color:#FCF3D8;
   	background-image:url(../images/countries/_panels/malawi_2013.jpg);
   	background-repeat:no-repeat;
	text-indent: -9999px;
}
.row_one_right:hover{
  	background-position: -310px 0px;
}
.row_one_middle {
	padding:10px;
	margin-left:333px;
  	margin-right:333px;
	height:140px;
	background-color:#FCF3D8;
   	background-image:url(../images/countries/_panels/kenya_2013.jpg);
   	background-repeat:no-repeat;
	text-indent: -9999px;
	
}
.row_one_middle:hover{
  	background-position: -310px 0px;
}

Which is looking like this:

http://www.goodsafariguide.net/lodges/index101.php

I’m just playing around with it by trying floats and widths, but haven’t resolved it yet.

Any suggestions?

4

Adding


float:left;
width:290px;

to the rules:

.row_one_middle
.row_two_middle
etc

Is almost there, but shunting them onto their own row, rather than placing them in the middle:

http://www.goodsafariguide.net/lodges/index102.php

I’m wondering now if I did go down this route originally, and this was the point at which I got stumped!

5

OK, I think I’ve got it working now.

For the middle rules, it didn’t like:


.row_one_middle {
	margin-left:333px;
  	margin-right:333px;
	width: 290px;
	height:140px;
	background-color:#FCF3D8;
   	background-image:url(../images/countries/_panels/kenya_2013.jpg);
   	background-repeat:no-repeat;
	text-indent: -9999px;
}

or


.row_one_middle {
	margin-left:333px;
  	margin-right:333px;
	width: 290px;
	height:140px;
	background-color:#FCF3D8;
   	background-image:url(../images/countries/_panels/kenya_2013.jpg);
   	background-repeat:no-repeat;
	text-indent: -9999px;
        float:left;
}

But does work with:


.row_one_middle {
	width: 310px;
	height:160px;
	margin-left:23px;
	background-color:#FCF3D8;
   	background-image:url(../images/countries/_panels/kenya_2013.jpg);
   	background-repeat:no-repeat;
	text-indent: -9999px;
	float:left;
}