如何更改此确切代码以对鼠标悬停执行悬停效果？
我尝试了一些其他问题和答案,但我无法真正遵循它们.
所以HTML是:
<a href="RR.html"><img src="R3.jpg" width=700 height=300 /></a>
<div>
<a href="SSX.html"><img src="SSX.jpg" height=100 width=120 /></a>
<a href="MPreview.html"><img src="MaxPayne3Cover.jpg" height=100 width=120 /></a>
<a href="NC.html"><img src="NC.jpg" height=100 width=120 /></a>
</br>
</div>
现在我想做的是当鼠标悬停在小图像上时改变大尺寸图像.
小智 48
试试这个简单而最短的,只需更改图片的URL:
<a href="TARGET URL GOES HERE">
<img src="URL OF FIRST IMAGE GOES HERE"
onmouseover="this.src='URL OF SECOND IMAGE GOES HERE';"
onmouseout="this.src='URL OF FIRST IMAGE GOES HERE';">
</a>
Sar*_*J S 21
请尝试以下代码.它正在发挥作用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title><br />
</head>
<body>
<p>
<script type="text/javascript" language="javascript">
function changeImage(img){
document.getElementById('bigImage').src=img;
}
</script>
<img src="../Pictures/lightcircle.png" alt="" width="284" height="156" id="bigImage" />
<p> </p>
<div>
<p>
<img src="../Pictures/lightcircle2.png" height=79 width=78 onmouseover="changeImage('../Pictures/lightcircle2.png')"/>
</p>
<p><img src="../Pictures/lightcircle.png" alt="" width="120" height="100" onmouseover="changeImage('../Pictures/lightcircle.png')"/></p>
<p><img src="../Pictures/lightcircle2.png" alt="" width="78" height="79" onmouseover="changeImage('../Pictures/lightcircle2.png')"/></p>
<p> </p>
</br>
</div>
</body>
</html>
我修改了代码,就好像它会有一些延迟..但是,它仍然没有动画..
function changeImage(img){
// document.getElementById('bigImage').src=img;
setTimeout(function() {document.getElementById('bigImage').src=img;},1250);
}
或者这样做:
<a href="SSX.html">
<img src="SSX.jpg"
onmouseover="this.src='SSX2.jpg';"
onmouseout="this.src='SSX.jpg';"
height=100
width=120 />
</a>
我认为这是最简单的方法.
如果您使用此技术,则无需JavaScript
<div class="effect">
<img class="image" src="image.jpg" />
<img class="image hover" src="image-hover.jpg" />
</div>
你需要css来控制它
.effect img.image{
/*type your css here which you want to use for both*/
}
.effect:hover img.image{
display:none;
}
.effect img.hover{
display:none;
}
.effect:hover img.hover{
display:block;
}
记得给div一些类,并在你的css名称中提及它以避免麻烦:)