html鼠标悬停出现背景图,CSS中怎么让鼠标经过时显示背景图片

能睡

于 2021-06-03 21:01:07 发布

阅读量2k

点赞数 1

文章标签： html鼠标悬停出现背景图

本文介绍了如何使用CSS的:hover选择器和JavaScript事件监听（onmouseover/onmouseout）来改变元素的背景图片，展示了两者在实现动态效果时的灵活性和应用场景。示例中详细给出了代码实现，包括纯CSS方法和结合JS的解决方案，适用于前端开发者提升交互体验。

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

通常可以使用css样式的 :hover 选择器，如示例div1。

也可以使用js来控制css样式，用js可以灵活加入其它效果(延迟显示、随机背景图)，如示例div2。

示例代码：

!DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8titleDocument/titlestyle.d1{width: 150px;height: 150px;}.d1:hover{ /*在这里使用hover 来改变背景图 */background:url(2531170_142659950000_2.jpg);}.d2{width: 150px;height: 150px;}/style/headbodydiv class=d1div1/divdiv class=d2 οnmοuseοver=showbg(this) οnmοuseοut=hidebg(this) !--分别设置了鼠标进入、离开的事件 --div2/div/bodyscriptfunction showbg(e){e.style.background=url(2531170_142659950000_2.jpg); //用javascript来改变背景图片样式}function hidebg(e){e.style.background=none;}/script/html

*具体选择根据需要灵活应用

*注意示例图片要引用正确

取消