js 鼠标移入移出
鼠标移入 移出
onmouseover 属性在鼠标指针移至元素之上时触发
onmouseout 属性在鼠标指针移除元素时触发。
HTML代码
<div class="video_nav"> <div class="video"> <span class="vi current">十佳球</span> <span class="vi">大神回忆录</span> <span class="vi">视频专区</span> <span class="vi">高手大讲堂</span> </div> <a href="" class="video_bg1" style="display: block"> <img src="res/img/video_4.jpg" alt=""> <span class="play"></span> </a> <a href="" class="video_bg1" style="display: none"> <img src="res/img/video_2.jpg" alt=""> <span class="play"></span> </a> <a href="" class="video_bg1" style="display: none"> <img src="res/img/video_3.jpg" alt=""> <span class="play"></span> </a> <a href="" class="video_bg1" style="display: none"> <img src="res/img/video_1.jpg" alt=""> <span class="play"></span> </a> </div> </div>
js代码
var div = document.getElementsByClassName('video'); var spa = document.getElementsByClassName('vi'); var ull = document.getElementsByClassName('video_bg1'); for (var i = 0; i < spa.length; i++) { spa[i].index = i; spa[i].onmouseover = function () { for (var i = 0; i < spa.length; i++) { spa[i].className = 'vi'; ull[i].style.display = 'none'; } this.className = 'vi current'; ull[this.index].style.display = 'block'; } }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步