Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial


Image wont hover!

.logo img { background-image: url("img/logo.png") no-repeat; display: inline; margin-left: -564px; }

.logo img a:hover { background-image: url("img/logo_hover.png") no-repeat; display: inline; margin-left: -564px;

This is the code I am using. The image is a logo that re-directs the user back to the homepage again. However I am trying to make it hover. The hover doesnt work. Can someone perhaps tell me why please??

4 Answers

Better practice will be to use this method:


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


background:url('/someSprite.png') 0 0 no-repeat; 
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.


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

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>


Wrap your code with ```

Please try and repost the HTML if you have a chance. In the mean time, if the logo still isn't showing have you checked your paths? In CSS relative paths are always relative to the file in which the path is referenced, not the root.

Here's an example of a typical directory structure:

  |- logo.png
  |- style.css

In this example, if you wanted to reference the logo.png file from the style.css you would have to do the following:

a { background: url('../img/logo.png') } 
<div class="logo">
    <a href="index.html"><img src="img/logo.png"></a>
<div class="logo">
    <a href="index.html"></a>
.logo a { background: url("img/logo.png") no-repeat; }
.logo a:hover { background: url("img/logo_hover.png") no-repeat; }
// Make sure the path to logo is relative to the css file.