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

您所在的位置:网站首页 js鼠标悬停改变背景图 html鼠标悬停出现背景图,CSS中怎么让鼠标经过时显示背景图片

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

2024-06-28 22:44| 来源: 网络整理| 查看: 265

通常可以使用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

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

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

取消

评论



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3