Maximize hit-area

HTML & CSS
1

Hello,

I have a text next to an image. Both the text and the image point to the same direction. I’d like to give the user the impression that the whole <div> containing the image and the text is one big link. I manage to handle the color-change hover effect, but I can’t get the link to fill the whole area.

Not clear? Code speaks better than I do:

HTML:


<div id="hit-area">
<a href="#"><img src="test.jpg"></a><!-- height of about 200px -->
<p><a href="#">This is going some text.</a></p> <!-- height of a couple of pixels -->
</div>

CSS:


#hit-area a {
	display: block;
	color: #ccc;
	}
#hit-area:hover a {
	display: block;
	color: #444;
	}
#hit-area img {
	float: left;
	}

The image height is much bigger than the height taken by the text. It means that there is a “blank space” below the line of text.

Upon hovering the blank space, I get the color change. But… I would like to have the cursor change as well, as if the link was occupying the whole space of the paragraph, not only the space taken by the characters it wraps.

Is it feasible?

:slight_smile:

2

You could try adding

#hit-area {overflow: hidden;}

to your styles.

Or, if you are happy to go down the HTML5 route, you can wrap the div in the <a> (yes, it’s allowed in HTML5):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Experiment</title>
	
<style type="text/css" media="all">
* {margin: 0; padding: 0;}
#hit-area a {
	display: block;
	color: #ccc;
	}
a {
	display: block;
	color: #444; 
	text-decoration: none;
	}
a:hover {text-decoration: underline;}
#hit-area img {
	float: left;
	}
#hit-area {overflow: hidden;}
#hit-area:hover {background: #f4f4f4;}
</style>

</head>


<body>
<a href="#">
<div id="hit-area">
<p>
<img alt=""  src="test.jpg">
This is going some text.
</p>
</div>
</a>

</body>

</html>
3

Upon hovering the blank space, I get the color change. But… I would like to have the cursor change as well, as if the link was occupying the whole space of the paragraph, not only the space taken by the characters it wraps.

That’s easy (cursor property) but not a wise move for the parts of the div that don’t actually have a working link under the cursor.

I played around with this sort of problem recently: I didn’t want the HTML5 method (though it does work well) and I was not keen on the JavaScript way, so I quit bothering with it. Trying to get a block-level anchor to behave well without JS or HTML5 methods was beyond me.

If you want the JS way, you could try the jQuery biggerlink plugin; otherwise, use HTML5, as Ralph has explained.

4

overflow: hidden works great but… it clears the img float. :frowning:

Any workaround?

What are the issues I may encounter with the html5 approach? Is it widely supported? Does it degrade nicely? :slight_smile:

Thanks ralph, you’re really helping me out.

5

Hello,


#hit-area p {
height: 100px;
	}
#hit-area a {
display: block;
color: #444;
height: 100%;
	}

Working with height may solve your problem.

:slight_smile: