悬停时更改背景颜色和图像

Question

I have a square with a logo inside. On hover in the square, I want the background color to change as well as the color of the logo.

I have the following code:

<div class="pure-u-1 pure-u-md-1-3">
 <div class="project", id="project1">
  <a href="#" ><img class="pure-img" src="/media/logo.png" onmouseover="this.src='/media/logo2.png'" onmouseout="this.src='/media/logo.png'" width="80px" height="78px" alt="logo"></a>
 </div>
</div>

.project {
  background-color: #f5f4f4;
  margin: 0 0.5em 2em;
  padding: 4em 4em;
}

#project1:hover {
  background-color: red;
}

I can get the logo to change on hover and I can get the square to change, but I can't get them to both change at the same time, ie when the mouse touches the square.

I'm assuming this needs javascript, which I do not know. Any tips/help is greatly appreciated.

Answer 1

Cleaner HTML (since img tag needs a source, you can change it for a div):

<div class="pure-u-1 pure-u-md-1-3">
  <div class="project", id="project1">
   <div class="pure-img">
  </div>
 </div>

And the CSS:

.project {
  background-color: #f5f4f4;
  margin: 0 0.5em 2em;
  padding: 4em 4em;
}

#project1:hover {
  background-color: red;
}

.pure-img{
    background-image: url(http://dummyimage.com/600x400/000/fff);
    width: 80px; 
    height: 78px;


}

#project1:hover .pure-img {
  background-image: url(http://dummyimage.com/600x400/666/0011fc);
}

and the fiddle http://jsfiddle.net/h6gwwox6/1/

Answer 2

No JavaScript required, just CSS. No need for an <img> either.

<div class="logo">Brand Name</div>

.logo {
    width: 80px;
    height: 78px;
    text-indent: -9999em;
    background-image: url('http://s17.postimg.org/7hltqe5e3/sprite.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    background-color: blue;
}
.logo:hover {
    background-color: red;
    background-position: -80px 0;
}

http://jsfiddle.net/12u7ma2q/

Create a sprite with both versions of the logo side-by-side. When you hover you will change the background color and shift the position of the sprite image (left, right, up, down - depends on how you created your sprite).

---

The benefits to this answer over sailens is that you're not using invalid markup ( <img> without a src attribute) and you're only making a single request for an image instead of two. Oh, and less markup - a single <div> (which could be an <a> , <span> etc).

You could also shorten .logo by using background instead of individual background properties. I listed them out at first for clarity.

.logo {
    width: 80px;
    height: 78px;
    text-indent: -9999em;
    background: blue url('http://s17.postimg.org/7hltqe5e3/sprite.png') no-repeat 0 0;
} 

http://jsfiddle.net/12u7ma2q/1/