我在我的网站上有一个由图像链接组成的菜单，我想在每个菜单对象上都有不同的鼠标悬停功能，我试过这样，但它总是适用于后面的脚本，所以当我悬停启动时，它会更改为信息。
<script language="javascript">
function MouseRollover(start) {
start.src = "starthover.png";
}
function MouseOut(start) {
start.src = "startidle.png";
}
</script>
<script language="javascript">
function MouseRollover(info) {
info.src = "infohover.png";
}
function MouseOut(info) {
info.src = "infoidle.png";
}
</script>
对于我得到的链接:
<a href="test.html">
<img src="startidle.png" border="0px"
onMouseOver="MouseRollover(this)"
onMouseOut="MouseOut(this)" />
</a>
<a href="test.html">
<img src="infoidle.png" border="0px"
onMouseOver="MouseRollover(this)"
onMouseOut="MouseOut(this)" />
</a>
我想知道是否有任何方法可以对这些功能进行分类，以便我可以获得相同功能但不同图片的菜单？
最佳答案
您的第二个脚本会覆盖第一个脚本，这意味着每次您调用“MouseRollover”或“MouseOut”时，您的 js 都会执行第二个脚本。
你可以只使用一个函数来交换你的图像，不需要有四个函数。
<head>
<script>
function swapImg(element, img) {
element.src = img;
}
</script>
</head>
<body>
<a href="#">
<img src="startidle.png" border="0px" width="150px"
onMouseOver="swapImg(this, 'img01.jpg')"
onMouseOut="swapImg(this, 'img02.jpg')" />
</a>
<a href="#">
<img src="infoidle.png" border="0px" width="150px"
onMouseOver="swapImg(this, 'img03.jpg')"
onMouseOut="swapImg(this, 'img04.jpg')" />
</a>
</body>
此外，它是“边界”而不是“寄宿生”。
关于javascript - 带鼠标悬停 javascript 的链接菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23246347/