利用js实现鼠标切换控件背景图片

最新推荐文章于 2023-02-15 18:12:42 发布

feven1994

最新推荐文章于 2023-02-15 18:12:42 发布

阅读量4.5k

点赞数 1

分类专栏： web前端开发文章标签：鼠标切换背景 onmouseout onmouseover onmousedown

本文链接：https://blog.csdn.net/feven1994/article/details/52592630

版权

本文介绍如何利用JavaScript实现鼠标事件（onmouseover, onmouseout, onmousedown）来改变网页控件的背景图片。默认背景为img1，鼠标悬停时变为img2，鼠标离开恢复为img1，点击后则显示img3，此技术常用于导航栏的交互设计。" 714747,116984,使用DataTable遍历TreeView节点,"['前端开发', 'WinForm', '数据展示']

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

需要三张不同的图片，默认背景图片为img1，鼠标放在控件上方背景图片为img2，鼠标离开背景图片恢复为img1，鼠标点击控件背景图片为img3.

主要应用于导航栏监听鼠标的位置和状态。

<div>
<buttonid="imgTab"οnmοuseοver="over(this)"οnmοuseοut="out(this)"οnmοusedοwn="down(this)"style="background-image:url(/image/img1.jpg)">
</button>
</div>

function over(x){
x.style.backgroundImage = "url(/image/img2.jpg)";
}
function out(x){
x.style.backgroundImage = "url(/image/img1.jpg)";
}
function down(x){
x.style.backgroundImage = "url(/image/img3.jpg)";
}