basically i want the entire area to be clickable, and i want the background img to change on hover. so i formatted an a tag (see below code) but am having an annoying issue i don’t know how to solve.
for some reason, the h4 and p tags are not taking the color i’m trying to apply to them; they show up as the purple “visited link” color (and before i visited that link, they showed as the default blue link color). they’re accepting font size, weight, padding etc - everything except the color. any ideas? OR can someone suggest a way to do this better?
here is the code:
<a class="ind-latest" href="22">
<h3>Latest Blog Post</h3>
<img src="images/rss.gif" width="19" height="19" alt="rss icon" />
<hr />
<h4>Apr. 8, 2010</h4>
<p>Surges in mobile Marketing, Social Media and Mobile Apps for Businesses</p>
</a>
I haven’t tried this yet, but off the top of my head, try adding a <span class=“ind-latest”> </span> after your “a” tag. If that doesn’t work may I suggest you create a color class and apply to all the desired tags.
<a class="ind-latest" href="22">
<span class="ind-latest">
<h3>Latest Blog Post</h3>
<img src="images/rss.gif" width="19" height="19" alt="rss icon" />
<hr />
<h4>Apr. 8, 2010</h4>
<p>Surges in mobile Marketing, Social Media and Mobile Apps for Businesses</p>
</span>
</a>
Hi,
You need to find another way to do it, your code is invalid. It is illegal to nest block level elements inside an anchor. The anchor is an inline element and will be recognized as such via doctype rendering. The fact that you set display;block; on the anchor does not make it valid coding.
or maybe can you explain how it’s being done? it looks like maybe there is an a tag, and the span inside the a tag is sized to be the size of my overall element…? and then the background image is placed on the span?
I think that thread’s a little complicated for me to wade through but thanks
This works exactly as I want! Except I need the bg to be an image.
Is there an easier way for me to learn what they did in the quiz? I dont understand any of that huge post or even know what they were originally doing. Is there a demo up somewhere??
Hi,
The examples from the quiz were basically methods that allowed for the background color/image to change on hover for IE6. They were setting the nested span in the anchor as position:absolute; and layering it on top the all elements.
Do you need support for IE6?
Do you need the BG image to change on hover?
Is there an easier way for me to learn what they did in the quiz? I dont understand any of that huge post or even know what they were originally doing. Is there a demo up somewhere??
Here was one of the nice soulutions submitted by Erik.j
Just run this code in your browser as test.html or something like that.
That demo will change the BG color for good browsers by using div:hover but it will not work in IE6 since it only supports :hover on anchors, hence the reason for the quiz.
This works exactly as I want! Except I need the bg to be an image.
Depending on which method you choose the BG image would either go on the anchor or the parent div, not on the span though.
If you don’t need to support IE6 while having the BG image change on hover then there is really no reason to be using the code from the quiz.
Working from the original code you posted I used the AP anchor method and reworked your code.
I see that you did have the BG image changing on hover so this method will not work in IE6, however the anchor will continue to work. If IE6 is not a big concern then this method will work just fine.
Since I did not have your BG images I set up some alternate BG colors. I also brought the floated RSS image first in the source so you did not have to drag it up with a negative margin.
Give this a try -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Div Hover Demo</title>
<style type="text/css">
.ind-latest {
width:258px;
height:102px;
background:#EEF url(../images/ind_blogbg.gif);
text-align:left;
text-decoration:none;
position:relative;/*set containing block for AP anchor*/
}
.ind-latest:hover {
background:#CDF url(../images/ind_blogbg-over.gif);
}
.ind-latest h3 {
font-size:15px;
font-weight:bold;
color:#000;
margin:5px 0 0 6px;
padding-top:12px;
}
.ind-latest img {
float:right;
margin:5px 5px 0 0;
width:19px;/*testing without image*/
height:19px;/*testing without image*/
background:orange;/*testing without image*/
}
.ind-latest hr {
width: 95%;
}
.ind-latest h4 {
font-size: 11px;
font-weight: bold;
color:#01726b;
margin: 5px 0 0 6px;
}
.ind-latest p {
font-size: 11px;
font-weight: bold;
color: #4c4c4c;
margin: 5px 5px 0 6px;
}
.ind-latest a {/*makes entire blog and news posts area clickable */
position:absolute;
top:0;left:0;
width:100%;
height:100%;
background:url(foo) fixed;/*stop anchor from falling through in IE6/7*/
}
</style>
</head>
<body>
<div class="ind-latest">
<img src="images/rss.gif" width="19" height="19" alt="rss" />
<h3>Latest Blog Post</h3>
<hr />
<h4>Apr. 8, 2010</h4>
<p>Surges in mobile Marketing, Social Media and Mobile Apps for Businesses</p>
<a href="22"></a>
</div>
</body>
</html>
One thing more that I would suggest is to use a single sprite image for the normal and hover states of the div’s BG image.
That gets the hover state of the image preloaded since it is seamed with the normal state to form a single image.
Then all you do is change the BG position on hover and there is no img loading delay.
