更改链接图像悬停

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