JS之鼠标移上去的时候改变背景图片

最新推荐文章于 2024-05-23 10:56:36 发布

原创最新推荐文章于 2024-05-23 10:56:36 发布 · 6.7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#JS #onmouseover #onmouseout

WEB前端专栏收录该内容

114 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现鼠标悬停时元素背景图片切换的方法。通过为div元素设置onmouseover和onmouseout事件，当鼠标移入时更改className为style1显示一张背景图片，鼠标移出时则切换回style2的另一张背景图片。

<!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>鼠标移上去的时候改变背景图片</title>
<style type="text/css">
.style1{background-image:url(images/bg2.gif);}
.style2{background-image:url(images/bg1.gif);}
</style>
</head>

<body>
<div id="divname1"  onmouseover="this.className='style1'" onmouseout= "this.className='style2'"><a href="#">内容内容内容</a></div>
</body>
</html>