Image wont hover!

Better practice will be to use this method:

HTML:

<a href="" class="logo">Site name</a>

CSS:

.logo{
display:block; 
width:100px; 
height:90px; 
background:url('/someSprite.png') 0 0 no-repeat; 
text-indent:-5000px; 
overflow:hidden;
}
.logo:hover{
background-position: 0 -90px;
}

By this code you make logo on background and change it on hover with CSS-sprite method.

Hi Stephanie,

Mark's suggestion of sprites is a great one. They can dramatically reduce the number of HTTP requests your page needs to make and improve hover effects by having all images pre-loaded (eg. no delay on first hover). However, it doesn't answer the question about what's going on with your code. Without seeing the HTML I'll have to make some assumptions, but here's a couple things I noticed about the code you posted.

1. Applying a background to an IMG element won't work. The image's src will become the content of the element obscuring any background. There are some rare cases this would work, like if you had a fully transparent image, but the are so many better solutions. I would never recommend this method.

2. I'm assuming you're trying to do a traditional background swap on hover. If that's the case, to make the pseudo class hover the way you're intending you have to apply the pseudo class to the same element as the original background. In your code example you've applied the original background image to an IMG element, but the :hover pseudo class to a child 'a' element. What you're code does is apply a new background image to the 'a' element when hovered on, but doesn't remove background from the parent.

Here are the changes I would make:

.logo a { background-image: url("img/logo.png") no-repeat; display: inline; margin-left: -564px; }  // Define height and width here if needed
.logo a:hover { background-image: url("img/logo_hover.png") no-repeat; }

Without seeing the HTML I can't say with absolute certainly the proposed changes will work, but I think this is what you're looking for. If this doesn't work, post your HTML and I'll be happy to assist.

Ryan

I tried this method and the logo doesnt show on the webpage. This is my HTML

<div class="logo"> <a href="index.html"><img src="img/logo.png"></a> </div>