更改懸停圖像不起作用

-2

我想用hover上的另一圖像替換圖像，但我很難實現它 - 懸停時看起來沒有任何事情發生。更改懸停圖像不起作用

<div id="container"> 
    <div class="content"> 
     <div class="left"> 
      <a href="#"><img src="http://dummyimage.com/307x349/000/fff" alt="tyler st salon home"></a> 
     </div><!-- end left --> 
     <div class="center"> 
      <a href="#" class="top"><img src="http://dummyimage.com/307x166/000/fff" alt="about tyler st salon" class="about_hover"></a> 
      <a href="#" class="bottom"><img src="http://dummyimage.com/307x166/000/fff" alt="tyler st salon service" class="services_hover"></a> 
     </div><!-- end center --> 
     <div class="right"> 
      <a href="#" class="top"><img src="http://dummyimage.com/307x166/000/fff" alt="tyler st salon products" class="products_hover"></a> 
      <a href="#" class="bottom"><img src="http://dummyimage.com/307x166/000/fff" alt="contact tyler st salon" class="contact_hover"></a> 
     </div><!-- end right --> 
    </div><!-- end content -->  

</div><!-- end container --> 

html, body, #container, .content, .left, .right, .center { 
    height: 100%; 
} 

#container { 
    min-height: 349px; 
} 

#container { 
    margin: 0 auto; 
    width: 960px; 
} 

#container .content { 
    margin-top: 115px; 
    position: relative; 
} 

#container .content .left, 
#container .content .center, 
#container .content .right { 
    position: relative; 
    width: 307px; 
} 

#container .content .left { 
    float: left; 
} 

#container .content .center { 
    float: left; 
    padding-left: 19px; 
} 

#container .content .right { 
    float: right; 
} 

#container .content .top, 
#container .content .bottom { 
    position: absolute; 
} 

#container .content .top { 
    top: 0; 
} 

#container .content .bottom { 
    bottom: 0; 
} 

#container .content .center .about_hover { 
    width: 307px; 
    height: 166px; 
    background: url('img/about_hover.jpg') center center no-repeat; 
} 

#container .content .center .services_hover { 
    width: 307px; 
    height: 166px; 
    background: url('img/services_hover.jpg') center center no-repeat; 
} 

#container .content .center .products_hover { 
    width: 307px; 
    height: 166px; 
    background: url('img/products_hover.jpg') center center no-repeat; 
} 

#container .content .center .contact_hover { 
    width: 307px; 
    height: 166px; 
    background: url('img/contact_hover.jpg') center center no-repeat; 
}

來源

2013-04-12 AMC

這裏是1個變種
檢查這個fiddle
當我懸停時我隱藏你的圖片

a:hover img 
{ 
    display:none; 
}

我設置了你的背景圖片（我把你的班級從圖片上移動到）<a>標籤。

<a href="#" class="top about_hover">

樣品小提琴只是適用於您的<a class="top"...

隨時與它

來源

2013-04-12 22:20:56 trajce

我唯一的挑戰是'class =「top」'旨在整個站點多次使用，這就是爲什麼我把'class =「about_hover」 'img'標籤內。 – AMC

@AMC你總是可以添加多個類.'top'只是一個例子 – trajce

哇，我不知道你可以有兩個類選擇器。（顯然，我還有很多東西需要學習。）謝謝你的幫助。供將來參考 - http://css-tricks.com/multiple-class-id-selectors/ – AMC

你的CSS指定改變由圖像所覆蓋的區域的背景。要實際更改圖片，您必須使用內嵌的<img src="...">內容，可能會通過javascript中的懸停事件（或mousein/mouseout）偵聽器進行喧鬧。

This answer顯示如何在點擊事件中更改圖像。爲了適應對懸停事件，只是改變了事件監聽器.hover()

來源

2013-04-12 22:15:45 PaulProgrammer

」的例子..要真正改變圖像，你必須使用內容猴子「你能解釋一下嗎？ – AMC

http://stackoverflow.com/questions/554273/changing-the-image-source-using-jquery – PaulProgrammer

這是寫的正確方法：

.element:hover{ 
/* stuff */ 
}

這是錯誤的：

.element_hover{ 
    /* stuff */ 
    }

來源

2013-04-12 22:17:59 Yenn

'.element_hover'指的是一個特定的類，但我現在看到，我完全忽略了添加' ：懸停「到最後。 – AMC

是的，有時你必須使用：懸停來使懸停效果:)。如果這有助於解決您的問題，請考慮接受我的答案，因爲正確謝謝 – Yenn

發揮這裏的JavaScript的影像互換（無jQuery的）

<!doctype html> 
<html> 
<head> 
<script> 
function byId(e){return document.getElementById(e);} 
window.addEventListener('load', myInit, false); 

function myInit() 
{ 
    byId('img1').addEventListener('mouseover', onMouseOverOut, false); 
    byId('img1').addEventListener('mouseout', onMouseOverOut, false); 
} 

// swaps the hoverImg and src attributes of the image it's attached to as an event handler 
function onMouseOverOut() 
{ 
    var tmp = this.src; 
    this.src = this.getAttribute('hoverImg'); 
    this.setAttribute('hoverImg', tmp); 
} 
</script> 
<style> 
#img1 
{ 
    height: 256px; 
    width: 256px; 
} 
</style> 
</head> 
<body> 
    <img id='img1' hoverImg='http://www.gravatar.com/avatar/c89d764421e3857bf346733ff58d8d2a?s=128&d=identicon&r=PG' src='http://dummyimage.com/307x349/000/fff'/> 
</body> 
</html>

來源

2013-04-12 22:29:48 enhzflep

更改懸停圖像不起作用

回答

相關問題