Question

我的目标是制作一个简单的鼠标悬停效果。到目前为止我有这个，它不适合我。我一直在尝试许多不同的方式而且它不起作用。

<html>
<head>
<script type="text/javascript">
function mouseOver()
{
document.getElementByid("mouseIMG”).src="EOils.jpg";
}
function mouseOut()
{
document.getElementById("mouseIMG”).src="Hotrocks.png";
}
</script>

<title>Index</title>
<meta tag = "description" content="Index">
<meta tag = "keywords" content ="Home, Spa, Green, Leaf, Day, beauty, Supplies">
<style>
a:hover {
    background-color: yellow;
}
</style>
</head>
<body bgcolor="#66CCFF">
<center>

<font size="30" color="green">Mayos Green Leaf Day Spa</font>

</center>



<!——Navigation Bar Starts here!—->
<hr>
<center>
<h3 style="word-spacing:50px">

<a href src="ContactInformation.html">Contact_Information</a>
<a href src="ProductInformation.html">Product_Information</a>
<a href src="Index.html">Index</a>
</h3>
</center>
<hr>

<!——Navigation Bar Ends here!—->

<br><br>

<center>
<font size="25" color="red">Company Information</font>
</center>
<hr>
<br>

<center>
<font size="4" color="black">
	We started the company back in 2009. We have been in business serving our customers needs ever since!
We started this company noticing the need for a quality spa. Our goal is to serve each customer with dignity, thoughtfulness, and respect. We do this by providing clients privacy during their stay with us. We make sure that our prices are affordable and fair
both to you and our business above all else we insure a positive experience by providing quality customer service. Our clients love us, and to show that we have been in business for 6 years. Our passion for beauty still endures it is after all why we started the spa.
</font>


<hr>
<br><br><br>
 
<!——MouseOver Effect image.——>
<center> 
<img border="0" alt="Spa" src="Hotrocks.png" id="mouseIMG" onmouseover="mouseOver()" onmouseout="mouseOut()" />

 </center>
<!——The function of mouseover is to change a object normally an image into something else or different attributes.—->
<!——Images found using Google images.——>




<br><br><br>

<!——Navigation Bar Starts here!—->
<hr>
<center>
<h3 style="word-spacing:50px">

<a href src="ContactInformation.html">Contact_Information</a>
<a href src="ProductInformation.html">Product_Information</a>
<a href src="Index.html">Index</a>
</h3>
</center>
<hr>

<!——Navigation Bar Ends here!—->

<br><br><br>



<h5><i>2015 John Mayo</i></h5>






</body>
</html>

Answer 1

请参阅此fiddle

我已按照以下方式更改了您的<img>

<img border="0" alt="Spa" src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-300mmf_35-56g_ed_vr/img/sample/sample4_l.jpg" id="mouseIMG" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" />

我已经制作的JS如下。你可以使用你的脚本本身进行一些小改动 ..

function mouseOver(x) {
    x.src = "http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-300mmf_35-56g_ed_vr/img/sample/sample4_l.jpg";
}

function mouseOut(x) {
    x.src = "http://res.cloudinary.com/demo/image/upload/sample.jpg";
}

图像鼠标悬停效果

1 个答案:

请参阅此fiddle