更改背景颜色和悬停图像

Question

我有一个广场，里面有一个标志。悬停在广场上时，我想要改变背景颜色以及徽标的颜色。

我有以下代码：

<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; 
} 

我可以得到的标志改变悬停，我可以得到广场上的变化，但我不能在同一时间让他们到这两个变化，即当鼠标触及广场时。

我假设这需要javascript，我不知道。任何提示/帮助非常感谢。

Answer 1

不需要JavaScript，只需CSS。不需要<img>。

<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/

创建一个具有标志并排侧的两个版本一个精灵。当您悬停时，您将更改背景颜色并移动精灵图像的位置（左，右，上，下 - 取决于您创建精灵的方式）。

---

这个答案的好处超过sailens是，你不使用无效的标记（<img>没有src属性）和你只是做了一个形象，而不是两个单个请求。哦，少一些标记 - 一个<div>（这可能是一个<a>,<span>等）。

也可以使用background而不是单独的背景属性缩短.logo。为了清楚起见，我首先列出了它们。

.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/

Answer 2

清洁HTML（因为IMG标记需要一个源，你可以换一个div）：

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

而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); 
} 

和提琴 http://jsfiddle.net/h6gwwox6/1/