html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>javascript实现鼠标经过显示隐藏内容</title>
<link rel="stylesheet" href="./css/main.css">
</head>
<body>
<div id="app">
<ul id="list" class="clearfix">
<!-- <li><img src="./img/1.png" alt=""></li>
<li><img src="./img/2.png" alt=""></li>
<li><img src="./img/3.png" alt=""></li>
<li><img src="./img/4.png" alt=""></li>
<li><img src="./img/5.png" alt=""></li>
<li><img src="./img/6.png" alt=""></li>
<li><img src="./img/7.png" alt=""></li>
<li><img src="./img/8.png" alt=""></li>
<li><img src="./img/9.png" alt=""></li> -->
</ul>
<div class="title" style="left: 173px; top:206px" >
<!-- h3.appname+p.info+span.count+a.btn -->
<h3 class="appname">555</h3>
<p class="info">333</p>
<span class="count">111</span><a href="" class="btn">安装到手机</a>
</div>
</div>
<script src="./js/main.js"></script>
</body>
</html>js代码：
// 抓取元素
var oUl = document.querySelector('#list');
var oLi = oUl.getElementsByTagName('li');
var oDiv = document.querySelector('.title');
var oH3 = oDiv.querySelector('.appname');
var oP = oDiv.querySelector('.info');
var oSpan = oDiv.querySelector('.count');
var timer = null;
console.log(oUl);
console.log(oLi);
console.log(oDiv);
console.log(oH3);
console.log(oP);
console.log(oSpan);
// 初始化数据结构
// 把造的数据，初始化显示在页面中
var data = [
{
url: "./img/1.png",
title: "墨迹天气",
content: "全球约5亿人在使用的天气APP，支持196个国家20多万个城市及地区的天气查询，准确定位及时推送，分钟级、公里级天气预报，实时监测阴晴雨雪。",
count: "下载5.6亿次"
},
{
url: "./img/2.png",
title: '最美天气',
content: '始于颜值，陷于精准，忠于陪伴，醉于懂你。最美天气不忘初心砥砺前行，不仅保持最初的精美与颜值，通过不断的升级我们成为了更加懂你的天气预报。',
count: '下载5.8亿次'
},
{
url: "./img/3.png",
title: '365日历万年历农',
content: '从2008年到现在9年时间，我们专注于时间管理，励志成为您最好的生活助手，超2.5亿用户的一致选择。',
count: '下载2.6亿次'
},
{
url: "./img/4.png",
title: '滴滴出行',
content: '【近3亿用户的选择】2012年诞生的滴滴现已成为广受用户欢迎的城市出行应用！覆盖全国超过400个城市，乘客叫车成功率94%以上！',
count: '下载10.6亿次'
},
{
url: "./img/5.png",
title: '大众点评',
content: '-【大众点评黑珍珠餐厅指南】精选中国味蕾，探寻美味餐厅，盛大发布。<br>-【贺岁片放肆看】春节遇上情人节，我想陪你看电影~猜影片领礼券，最高可得35元！',
count: '下载8.6亿次'
},
{
url: "./img/6.png",
title: '58同城 -租房招',
content: '人人信赖的生活服务平台，海量生活信息免费查询、发布。 <br>真实、高效、免费，让您生活更简单！',
count: '下载9.3亿次'
},
{
url: "./img/7.png",
title: '百度糯米',
content: '√精选排行：快速发现优质吃喝玩乐商家<br>√搜索升级：新鲜商圈信息，精选玩乐内容，随时随地搜索get<br>√抽奖：iphone大奖抽不停 ',
count: '下载8.2亿次'
},
{
url: "./img/8.png",
title: '天气通',
content: '专业贴心的天气APP，3.8亿用户的选择，采用权威多数据源授权信息，智能纠错，国内3000多个城市与700多个景区全覆盖的天气预报和实时天气预警信息。各种天气状况从容应对，帮你做好生活决策，为你出行保驾护航。',
count: '下载2.1亿次'
},
{
url: "./img/9.png",
title: '饿了么',
content: '饿了么，专业的本地生活服务平台！<br>【好的都要 随叫随到】品质美食、水果生鲜、鲜花蛋糕、超市百货，30分钟送达！<br>【新人福利】外卖订餐，新用户领50元礼包，更多红包等你拿！',
count: '下载12.6亿次'
}
];
// 遍历
// 将数组对象data里的每一条数据中url属性上的值
// 赋值显示在li中的img的src上
// 也就是说 让图显示在每一个列表项中
// 将数据 渲染到指定的dom节点中 显示出来
data.forEach(function(item){
oUl.innerHTML += `<li><img src='${item.url}' /></li>`;
})
// 把类数组对象 转换成 数组
console.log(Array.from(oLi));
// 遍历(之一操作每一个li)
Array.from(oLi).forEach(function(item,index){
// 鼠标移入到当前li元素上的时候，要做的事情是
item.onmouseover = function(){
// 4.清除计时器
clearInterval(timer);
// 1.希望类名叫title的div盒子显示出来
oDiv.style.display = 'block';
// 2.希望类名叫title的div盒子显示在哪里
// 坐标位置的设置
oDiv.style.left = item.offsetLeft+10 + 'px';
oDiv.style.top = item.offsetTop +120 + 'px';
// 3.让data这个数组中的每一条数据 显示在指定的标签里
oH3.innerHTML = data[index].title;
oP.innerHTML = data[index].content;
oSpan.innerHTML = data[index].count;
// console.log(item.offsetLeft);
// console.log(item.offsetTop);
}
// 鼠标移出当前li元素的时候，要做的事情是
item.ommouseout = function(){
// 1.希望过0.5s后类名叫title的div盒子 隐藏起来
timer = setTimeout(function(){
// 让类名叫title的div盒子隐藏起来
oDiv.style.display = 'none';
},500)
}
// 鼠标移入到类名叫title的div盒子上，清除定时器
oDiv.onmouseover = function(){
clearInterval(timer);
}
// 鼠标移出到类名叫title的div盒子上的时候
// 让这个盒子过0.5s隐藏起来
oDiv.onmouseout = function(){
timer = setTimeout(function(){
// console.log(this);这里不能直接写this，因为这里this指向window
oDiv.style.display = 'none';
}, 1000);
}
// oDiv.onmouseout = function(){
// timer = setTimeout(()=>{
// // console.log(this);这里不能直接写this，因为这里this指向window
// oDiv.style.display = 'none';
// }, 1000);
// }
})css样式：
*{
margin: 0;
padding: 0;
}
li{
list-style-type: none;
}
.clearfix::after{
content: '';
display: block;
clear: both;
}
#app{
width: 600px;
margin: 100px auto 0;
/* outline: 1px dashed hotpink; */
}
#app li{
width: 96px;
height: 106px;
/* 添加行高 */
line-height: 106px;
float: left;
margin: 0 50px 40px 0;
/* outline: 1px dashed hotpink; */
/* 字体大小设置为0 */
font-size: 0;
/* 相对定位(子绝 父相) */
position: relative;
}
#app li img{
width: 100%;
height: 96px;
/* 水平居中 */
cursor: pointer;
/* 垂直居顶 */
vertical-align: middle;
}
.title{
display: none;
width: 250px;
padding: 20px;
border-radius: 5px;
background-color: #fff;
/* 滤镜(投影) */
filter: drop-shadow(0 0 4px rgba(0,0,0,0.3));
/* 绝对定位 */
position: absolute;
}
/* 绘制一个三角形 */
.title::before{
content: '';
width: 0;
height: 0;
/* border-right: 8px solid hotpink;
border-left: 8px solid lightskyblue; */
border-right: 8px solid transparent;
border-left: 8px solid transparent;
border-bottom: 10px solid #fff;
/* 绝对定位 */
position: absolute;
top: -10px;
left: 30px;
}
.appname{
margin-bottom: 0.5em;
}
.info{
color: #666;
font-size: 0.875rem;
line-height: 1.5;
margin-bottom: 0.5em;
}
.count{
color: #999;
font-size: 0.75rem;
margin-bottom: 0.5em;
}
.btn{
/* 将行元素转成块元素 */
display: block;
background-color: #eee;
border-radius: 3px;
border: 1px solid #bbb;
color: #666;
font-size: 0.875rem;
padding: 4px 8px;
margin-bottom: 0.5em;
text-align: center;
text-decoration: none;
}预览效果
1672
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
