更改背景顏色和懸停圖像

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/