[英]changing link image on hover
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 示例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.
这是我的代码。
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/ 请看一下https://jsfiddle.net/avzfdc2j/3/
It has been done using css with background image and transition 这是通过使用具有背景图片和过渡效果的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>
You should be changing the src
attribute instead: 您应该改为更改
src
属性:
function hoverImg(x) {
x.src = "image/arrowBtnHover.png"
x.style.transition = "ease 0.5s"
}
function normalImg(x) {
x.src = "image/arrowBtn.png"
}
But I don't think that the transition will work with this. 但是我认为过渡不会与此相适应。
Since it's an image , you need to change it's src
property, not it's CSS. 由于它是图像 ,因此您需要更改它的
src
属性,而不是CSS。
function hoverImg(x) {
x.src = "image/arrowBtnHover.png"
x.style.transition = "ease 0.5s"
}
function normalImg(x) {
x.src = "image/arrowBtn.png"
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.