懸停時更改鏈接圖像

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