Forums

zahidahmad9


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
.navigations {
	width:1000px;
	margin:0;
	height:250px;
        position: relative;
	float:left;
}
.navigations ul {
	margin:0;
	padding:0;
}
.navigations ul li {
       list-style-type: none;
       display:inline;
       margin:0px;
       padding:20px;
       border:0px solid;

}
.home {
	width: 150px;
	height: 111px;
	
}
.home img:hover {
    background:url(images/homehover.png) no-repeat;
	width: 150px;
	height: 111px;	
}

</style>
</head>

<body>
<div class="navigations">
 <ul>
   <li class="home"><a href="index.html"><img src="images/home.png" width="150" height="111" alt="home" title="home"></a></li> 
  </ul>
</div>
</body>
</html>

Senff

On hover, the image (home.png) has a background image (homehover.png) but it will always be hidden by the actual image (home.png).

In your markup, replace this:

<li class="home"><a href="index.html"><img src="images/home.png" width="150" height="111" alt="home" title="home"></a></li>

with this:

<li class="home"><a href="index.html"></a></li>

Then change your CSS to include this:

.home a {
	display:block; 
	width: 150px;
	height: 111px;
	background:url(images/home.png) no-repeat;	
}

.home img:hover {
    background:url(images/homehover.png) no-repeat;
}

There's better ways of doing this but for what you have right now, this would probably be the quickest fix.

zahidahmad9

thanks but i want image in html beacause i want use alt tag ......
alt tag is very important .......(seo)

Senff

Well, to be honest, having an image on your page with alt tag "home", or no image, won't make too much difference for SEO I think....

But ok, if you really need it, then you could get away with this CSS:

.home a {
	display:block; 
	width: 150px;
	height: 111px;
	background:url(images/home.png) no-repeat;	
}

.home a:hover img {
        display:none;
}</pre>

treehouse : what would you like to learn today?

Forums

image hover problem