Учитывая, что логотип - это контент, как отображать другое изображение при наведении?

Question

Учитывая логотип больше похож на содержание (чем украшение) на веб-странице, я нахожу this markup подходит для моего сайта:

<h1 id="logo"> 
    <a href="http://stackoverflow.com"> 
    <img src="logo.png" alt="Stack Overflow"> 
    </a> 
</h1> 

Учитывая случай, как я должен идти о создании опрокидывание/парения эффект такой, что другой Изображение логотипа отображается при наведении? (Например, фактический логотип черно-белый, при наведении курсора мыши, красочное изображение логотипа показано.)

Делая какие-нибудь, как это чувствует себя глупо (но у меня нет лучших идей в уме):

HTML :

<h1 id="logo"> 
    <a href="http://stackoverflow.com"> 
    <img id="logo-img1" src="logo1.png" alt="Stack Overflow"> 
    <img id="logo-img2" src="logo2.png" alt="Stack Overflow"> 
    </a> 
</h1> 

CSS:

#logo #logo-img2 { 
    display: none; 
} 
#logo:hover #logo-img1 { 
    display: none; 
} 
#logo:hover #logo-img2 { 
    display: inline; 
} 

Answer 1

Вы можете использовать box-sizing свойства для загрузки второго изображения в background и показать его на hover: HTML базе:

<h1 id="logo"> 
    <a href="http://stackoverflow.com"> 
    <img src="http://lorempixel.com/100/100/abstract/2" alt="Stack Overflow"> 
    </a> 
</h1> 

Основание CSS:

h1 a img { 
    background:url(http://lorempixel.com/100/100/people/9);/* preload img 2 here */ 
    box-sizing:content-box;/* safe reset , use prefix */ 
} 
h1 a:hover img { 
    height:0; 
    width:0; 
    padding:50px; 
} 

DEMO

Answer 2

Вы имеете право идею, но ваш :hover находится в неправильном месте, а селекторы немного разряжены.

Это должно работать, и это более эффективно при загрузке страницы!

HTML:

<div id="logo"> 
    <a href="http://stackoverflow.com"> 
    <img id="logo-img" src="logo1.png" alt="Stack Overflow"> 
    </a> 
</div> 

CSS:

#logo #logo-img { 
    content:url("logo1.png"); 
} 

#logo #logo-img:hover { 
    content:url("logo2.png"); 
}