why img:hover doesn't work?

Profile picture for user3779775
user3779775

I'm having a problem on img:hover

Here's my jsbin: http://jsbin.com/bereputu/1/edit

My problem is when I put my mouse over the "home" or "contact", the image that I want to replace the original appears a little under than I expected.

Here's my code:

<!-- language: lang-html --> 
<html>

<head>
	<title>UltraLotus</title>
	<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

<body>
	<div class="container">
		<div class="header">
			<img src="images/header.png">
		</div>
		<center>
		<div class="nav">
					<a href="index.html"><img src="images/home.jpg"></a>
					<a href="contact.html>"><img src="images/contact2.jpg"></a>
		</div>
		</center>
		<div class="page">
			<p></p>
		</div>
		<div class="footer">
		</div>
	</div>
</body>

</html>

CSS

<!-- language: lang-css --> 
body {
	background-image: url("images/bg.jpg");
	background-repeat: repeat-y;
	background-size: 100% 100%;
	margin:0;
    padding:0;
    height:100%;
}

.container {
	min-height: 100%;
}

.header {
	background-color:#1a1a1a;
	width:100%;
	height:100px;
}

.header img {
	position: relative;
	margin-top:-30px;
}

.nav {
	position:relative;
	width:100%;
	height:40px;
	top: -15px;
	background-image: url("images/nav.jpg");
}

.nav img {
	position:relative;
	margin-top:13px;
}

.nav a:first-child:hover {
 	position:relative;
 	background-image: url('images/home.jpg');
}

.nav a:nth-child(2):hover {
	position:relative;
	background-image: url('images/contact.jpg');
}
.page {
	padding-top:5px;
	top:150px;
	padding-bottom:70px;
}

.footer {
	position:absolute;
	bottom: 0;
    width:100%;
    height:70px;
    background-image: url("images/footer.jpg");
}

I'm not quite sure what you're looking to accomplish with the :hover styling, but it's replacing a totally different image than the one you're using in your original nav element.

For easier debugging, if you open up the chrome developer tools, you can force a hover state so you can look at all the applied css rules:

screenshot

You'll notice that you're giving your a element a background-image on hover, but it's contents still contains an img element. Thus the double styling.

Note 1: Since they're both the same, you really don't even need the hover styling at all.

Note 2: This does not seem worth pulling in an image to me. You should be able to accomplish this exact style with native html an css. They render far quicker, they're much easier to download, they're much better for screen readers, they have much cleaner and clearer content, and they extend and adapt much easier. I'd skip the images altogether and go html/css for this.

Here's a little CSS to get your started:

<!-- language: lang-css --> 
.nav a  {
  color: grey;
  font-size: 1.2em;
  text-decoration: none;
  border: 1px solid grey;
  padding: 5px;
  padding-bottom: 0px;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}

/* I even added in a little hover effect */
.nav a:hover {
  background-color: #2C2C2C;
}

Here's your full site design without any images (except your logo):

http://jsbin.com/bereputu/2/

You can get much more sophisticated but I would avoid imaging out your design as much as possible. If you're doing web dev, learn CSS