一、首先需要div布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js悬停</title>
<style type="text/css">
p {
width: 200px
height: 200px
background-color: skyblue
text-align: center
line-height: 200px
}
</style>
</head>
<body>
<p id="txt">我是一个DIV</p>
<script type="text/javascript">
var txt = document.getElementById('txt')
txt.setAttribute("title","鼠标悬停了")
</script>
</body>
</html>
二、div实在的在开发工具里面的代码效果如下截图：
三、这段代码最主要的重点是如下：
<script type="text/javascript">
var txt = document.getElementById('txt')
txt.setAttribute("title","鼠标悬停了")
</script>
四、实际代码在浏览器的渲染如下：
整体思路：可以用for循环去遍历<ul>下的所有<li>；然后对比鼠标悬浮时对应的li元素，输出当前的i，也就是对应li的下标。
html代码部分：
新建一个ul无序列表，并赋予id值，如：
<ul class="UL" id="UL">
<li>1111111</li>
<li>2222222</li>
<li>3333333</li>
<li>4444444</li>
</ul>
css部分：
接下来是对无序列表做一下简单的样式，便于后期测试悬浮效果；给li设置一下宽度以及设置一下边框，如：
.UL{display:block width:100px text-align:center margin:20px auto}
.UL li{display:block line-height:30px cursor:pointer border:1px dashed red}
最后是JS代码部分：
//定义ul的悬浮函数
document.getElementById("UL").onmouseover = function(e){
var target = e.target //获取对应目标元素
var children = this.children //获取ul里面的所有li元素集合
for(i = 0i<children.lengthi++){
if(target == children[i]) { //对比目标元素和li集合元素
alert("目标元素的下标为：" + i) //输出目标元素的下标
return
}
}
}
最后用浏览器打开该html文件，鼠标悬浮到li上面的时候，就会输出对应li的下标，比如鼠标覆盖在第3个li上面，即 <li>3333333</li>上面时，效果图如下：
