提示框随鼠标移动-白红宇的个人博客

提示框随鼠标移动

发布日期：2021-05-13 22:21:44 浏览次数：19 分类：原创文章

本文共 3133 字，大约阅读时间需要 10 分钟。

<!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>

上一篇：PHP-验证码

下一篇：百度搜索

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章