更改鏈接圖像懸停

Question

我今天的問題可能有一個簡單的答案，但是我找到了一些工作示例，但似乎無法將其傳輸到我的網頁。

我正在嘗試使用圖片作爲鏈接，並希望在將鼠標懸停在圖片上時更改圖片。下面的鏈接是我想要完成的，但是無論什麼原因，當我將我的代碼從我的頁面替換爲它時，它不起作用。

例http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_ev_onmouseover

我現在完全丟失，只需要一點點的幫助。這是我的代碼。

DEMO

function hoverImg(x) { 
 
    x.style.backgroundImage = "url(image/arrowBtnHover.png)" 
 
    x.style.transition = "ease 0.5s" 
 
} 
 

 
function normalImg(x) { 
 
    x.style.backgroundImage = "url(image/arrowBtn.png)" 
 
}

#header { 
 
    background-color: #473D39; 
 
    height: 100%; 
 
    width: 100%; 
 
    display: table; 
 
    position: absolute; 
 
    z-index: 10; 
 
} 
 
#wrapper { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 
#header h1 { 
 
    text-align: center; 
 
    margin: 0px; 
 
    font-size: 80px; 
 
    padding-top: 5%; 
 
    font-weight: normal; 
 
    color: #FFF; 
 
    letter-spacing: 18px; 
 
    text-transform: uppercase; 
 
} 
 
#header h5 { 
 
    text-align: center; 
 
    color: #FFF; 
 
    margin: 15px 15px 50px; 
 
    font-weight: normal; 
 
    text-transform: uppercase; 
 
    font-size: 14px; 
 
    letter-spacing: 2px; 
 
}

<div id="header"> 
 
    <div id="wrapper"> 
 
    <h1>Premier Webster</h1> 
 
    <h5>Local Web Design For The Profesional In You</h5> 
 
    <img onmouseover="hoverImg(this)" onmouseout="normalImg(this)" src="image/arrowBtn.png" /> 
 
    </div> 
 
</div>

Answer 1

請看看https://jsfiddle.net/avzfdc2j/3/

已使用的背景圖片和過渡的CSS做

div.smile { 
    background-image: url("http://images.clipartpanda.com/stupidity-clipart-1320682287266972230curius_face.svg.hi.png"); 
    background-size: 60px 60px; 
    height: 60px; 
    width: 60px; 
    cursor: pointer; 
} 

div.smile:hover { 
    background-image: url("http://images.clipartpanda.com/straight-face-clipart-black-and-white-smiley-face-hi.png"); 
    transition: ease 0.5s; 
} 

<a href="http://google.com/"><div class="smile"></div></a> 

Answer 2

你應該改變src屬性改爲：

function hoverImg(x) { 
    x.src = "image/arrowBtnHover.png" 
    x.style.transition = "ease 0.5s" 
} 

function normalImg(x) { 
    x.src = "image/arrowBtn.png" 
} 

但我不認爲過渡將與這方面的工作。

Answer 3

由於這是一個圖片，你需要改變它的src財產，而不是它的CSS。

function hoverImg(x) { 
    x.src = "image/arrowBtnHover.png" 
    x.style.transition = "ease 0.5s" 
} 

function normalImg(x) { 
    x.src = "image/arrowBtn.png" 
}