悬停时更改 link 图片

Question

我今天的问题可能有一个简单的答案，但是我找到了一些工作示例，但似乎无法将其传输到我的网页。

我正在尝试将图像用于 link，并希望当您将鼠标悬停在图像上时图像会发生变化。下面的 link 是我想要完成的，但是无论出于何种原因，当我将我的代码从我的页面替换到它时，它不起作用。

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

我现在完全迷路了，只需要一点帮助。这是我的代码。

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

您应该改为更改 src 属性：

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

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

但我不认为过渡将适用于此。

Answer 2

因为它是图片，您需要将其更改为 src 属性，而不是 CSS。

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

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

Answer 3

请看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>

悬停时更改 link 图片

changing link image on hover

html

javascript

css

hover