效果图
HTML
<ul>
<li>
标题一
<p style="background-color: pink;">
内容标题一的说明内容标题一的说明内容标题一的说明内容标题一的说明内容标题一的说明内容标题一的说明内容标题一的说明内容标题一的说明内容标题一的说明内容标题一的说明内容标题一的说明内容标题一的说明内容标题一的说明内容标题一的说明内容标题一的说明内容标题一的说明内容标题一的说明内容标题一的说明内容
</p>
</li>
<li>
标题二
<p style="background-color: skyblue;">标题二的说明内容标题二的说明内容</p>
</li>
<li>
标题三
<p style="background-color: orange;">标题三的说明内容标题三的说明内容</p>
</li>
</ul>
CSS
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style-type: none;
}
ul {
padding: 100px;
}
li {
width: 400px;
height: 40px;
border: 1px solid #333;
padding: 20px;
margin: 10px;
position: relative;
background-color: #fff;
}
li>p {
position: absolute;
left: 600px;
top: 300px;
width: 300px;
height: 200px;
display: none;
/* 表示让 p 标签不接受任何事件 */
pointer-events: none;
z-index: 999;
}
JS
var li = document.querySelectorAll('li');
for (var i = 0; i < li.length; i++) {
li[i].onmousemove = function (eve) {
var p1 = this.firstElementChild;
eve = eve || window.event;
p1.style.display = 'block';
p1.style.left = eve.offsetX+5 + 'px';
p1.style.top = eve.offsetY+5 + 'px';
}
li[i].onmouseout = function () {
var p1 = this.firstElementChild;
p1.style.display = 'none';
}
}