移入移出

最新推荐文章于 2024-04-07 13:01:24 发布

JICU

最新推荐文章于 2024-04-07 13:01:24 发布

阅读量137

点赞数

文章标签：移入移出

本文链接：https://blog.csdn.net/weixin_44540757/article/details/93966173

版权

这是一个移入和移出事件。在这里插入图片描述

但你移入黑色的框是就会触发第二张图。
源代码html：

移出我会消失

Css：
.pic{
width: 320px;
overflow: hidden;
margin: 0 0 0 550px;
}
.pic li{
overflow: hidden;
width: 49%;
float: left;
position: relative;
margin-bottom: 5px;
}
.nbh{
width: 158px;
height: 100px;
display: block;
background: #000;
}
.sd{
width: 100%;
height: 100%;
position: absolute;
bottom: 0px;
left: 0;
background: #fff;
opacity: 0.6;
display: none;
}
.jbm{
position: absolute;
height: 80%;
font-size: 14px;
bottom: 0px;
left:0;
z-index: 10;
display: none;//隐藏
color: #fff;
}
Js：
window.οnlοad=function(){
var nbc=document.getElementById(“nbc”);
var jbc=document.getElementById(“jbc”);
var sdc=document.getElementById(“sdc”);
nbc.onmousemove = function(){//onmousemove这是移入到nbc下面的二个ID就会显示出来。
jbc.style.display=“block”;
sdc.style.display=“block”;
};
nbc.onmouseout = function(){//onmouseout这是移出事件，但你移出nbc是下面的将会隐藏起来。
jbc.style.display=“none”;
sdc.style.display=“none”;
};
sdc.onmousemove = function(){
jbc.style.display=“block”;
sdc.style.display=“block”;
};
sdc.onmouseout = function(){
jbc.style.display=“none”;
sdc.style.display=“none”;
};
}