鼠标悬浮弹出移开消失js代码实现

鼠标悬浮动态大量被使用到网站中去,其实js原生代码代码实现非常简单

 var btn1 = document.getElementsByClassName('box1')[0];
 var boxd = document.getElementsByClassName('box2')[0];
    
     btn1.onmouseover = boxd.onmouseover=function(){
      boxd.style.display = 'block';
    };
    btn1.onmouseout = boxd.onmouseout = function(){
      boxd.style.display = 'none';
    };

简单地说就是使用js改变box2的css样式,onmouseover就是鼠标悬浮在box1和box2的事件。

鼠标悬浮在class名为box1的div,div2就会出现,移开则会消失[0]代表class为box1里的第一个

发布了1 篇原创文章 · 获赞 0 · 访问量 3
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 1024 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览