<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>classList</title>
<style>
*{
margin: 0;
padding: 0;
}
.wrap {
width: 1000px;
height: 400px;
background-color: #ccc;
}
.wrap_ul {
font-size: 14px;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
height: 100%;
}
.wrap_ul li {
width: 80px;
height: 100px;
margin: 30px;
list-style: none;
}
.wrap_ul li img {
width: 80px;
height: 80px;
}
.wrap_ul li span {
display: block;
width: 80px;
height: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="wrap">
<ul class="wrap_ul">
<li class="list">
<img src="1.png">
<span class="name">搭街坊</span>
</li>
<li class="list">
<img src="1.png">
<span class="name">大幅度</span>
</li>
<li class="list">
<img src="1.png">
<span class="name">地方</span>
</li>
<li class="list">
<img src="1.png">
<span class="name">速度快</span>
</li>
<li class="list">
<img src="1.png">
<span class="name">对方答复v</span>
</li>
<li class="list">
<img src="1.png">
<span class="name">范德萨</span>
</li>
<li class="list">
<img src="1.png">
<span class="name">sfgv</span>
</li>
<li class="list" class="list" class="list">
<img src="1.png">
<span class="name">是否需</span>
</li>
<li class="list" class="list">
<img src="1.png">
<span class="name">大锅饭</span>
</li>
<li class="list">
<img src="1.png">
<span class="name">地方</span>
</li>
<li class="list">
<img src="1.png">
<span class="name">搭街坊</span>
</li>
<li class="list">
<img src="1.png">
<span class="name">地方</span>
</li>
<li class="list">
<img src="1.png">
<span class="name">的付费的快</span>
</li>
<li class="list">
<img src="1.png">
<span class="name">速度快</span>
</li>
</ul>
</div>
<div class="desc">注意:tip一定要用fixed定位,如果用absolute的话,鼠标滚轮一滚,tip就移位了</div>
<script type="text/javascript">
var lists = document.getElementsByClassName('list');
var tip = document.createElement('div');
Array.apply(null,lists).forEach(function(current,index,arr){
current.addEventListener('mousemove',function(e) {
var name = this.querySelector('span');
tip.style.cssText = 'position:fixed;left:0;top:0;background:rgba(0,0,0,0.5);color:white;padding:5px;border-radius:4px';
tip.innerHTML =name.innerText;
tip.style.left = e.clientX + 'px';
tip.style.top = e.clientY + 'px';
this.appendChild(tip);
});
current.addEventListener('mouseover',function() {
tip.style.display = 'block';
});
current.addEventListener('mouseout',function() {
tip.style.display = 'none';
})
})
</script>
</body>
</html>