改变悬停的链接图像 [英] changing link image on hover

问题描述

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

我是试图使用图片进行链接，并希望在您将鼠标悬停在图片上时更改图片。下面的链接是我想要完成的，但无论出于何种原因，当我将我的代码从我的页面替换到它时，它不起作用。

示例 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;身高：100％;宽度：100％;显示：表格;位置：绝对; z-index：10;}＃wrapper {display：table-cell; vertical-align：middle;}＃header h1 {text-align：center; margin：0px; font-size：80px;填充顶部：5％; font-weight：normal;颜色：#FFF; letter-spacing：18px; text-transform：uppercase;}＃header h5 {text-align：center;颜色：#FFF; margin：15px 15px 50px; font-weight：normal;文字转换：大写; font-size：14px; letter-spacing：2px;}  

< div id = 报头 > < div id =wrapper> < h1> Premier Webster< / h1> < h5>专业人士的本地网页设计< / h5> < img onmouseover =hoverImg（this）onm​​ouseout =normalImg（this）src =image / arrowBtn.png/> < / div>< / div>

解决方案

请查看 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; 
光标：指针; 
} 
 
 div.smile：hover {
 background-image：url（http://images.clipartpanda.com/straight-face-clipart-black-and-白笑脸-hi.png）; 
过渡：缓解0.5s; 
} 
 
< a href =http://google.com/>< div class =smile>< / div>< / a> 
  

my question today probably has an easy answer, however I have found a few working examples but can't seem to transfer it to my web page.

I am trying to use an image for a link, and would like the image to change when you hover over it. The link below is what I am trying to accomplish, but for whatever reason when I substitute my code from my page to it, it doesn't work.

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

I am completely lost now and just need a little help. Here is my code.

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>

解决方案

Please take a look at https://jsfiddle.net/avzfdc2j/3/

It has been done using css with background image and transition

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>

这篇关于改变悬停的链接图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！