JS鼠标悬浮切换图片示例

最新推荐文章于 2023-04-19 14:21:21 发布

从来_没有过

最新推荐文章于 2023-04-19 14:21:21 发布

阅读量3.4k

点赞数

分类专栏：前端文章标签： css js

本文链接：https://blog.csdn.net/dustin_php/article/details/41049031

版权

本文介绍了使用JavaScript实现鼠标悬浮时切换元素背景图片的方法。错误的写法是直接设置backgroundImage，正确的做法是使用background属性或者正确构造backgroundImage的URL字符串。

摘要由CSDN通过智能技术生成

1、头部JS

function hnShowNewsPic(num){
	for(i=1;i<7;i++){
		document.getElementById("hn_news_pic"+i).src = "images/normal.gif";
	}
	document.getElementById("hn_news_pic"+num).src = "images/active.gif";
}

2、页面HTML：

    <div class="hn_news">
      <ul>
        <li><img id="hn_news_pic1" src="images/active.gif" οnmοusemοve="hnShowNewsPic(1);" /></li>
        <li><img id="hn_news_pic2" src="images/normal.gif" οnmοusemοve="hnShowNewsPic(2);"/></li>
        <li><img id="hn_news_pic3" src="images/normal.gif" οnmοusemοve="hnShowNewsPic(3);"/></li>
        <li><img id="hn_news_pic4" src="ima