整体思路：可以用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 = 0;i<children.length;i++){
if(target == children[i]) { //对比目标元素和li集合元素
alert("目标元素的下标为：" + i); //输出目标元素的下标
return;
}
}
};
最后用浏览器打开该html文件，鼠标悬浮到li上面的时候，就会输出对应li的下标，比如鼠标覆盖在第3个li上面，即 <li>3333333</li>上面时，效果图如下：
整体思路：可以用for循环去遍历<ul>下的所有<li>；然后对比鼠标悬浮时对应的li元素，输出当前的i，也就是对应li的下标。
接下来是对无序列表做一下简单的样式，便于后期测试悬浮效果；给li设置一下宽度以及设置一下边框
整体思路：可以用for循环去遍历<ul>下的所有<li>；然后对比鼠标悬浮时对应的li元素，输出当前的i，也就是对应li的下标。
ul{list-style:none;margin:0px;padding:0px;padding-bottom:10px;border:solid 1px #000;}
ul li{padding:10px 5px;margin-top:10px;border:solid 1px #c00;border-radius:3px;}
</style>
<ul id="test">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<script>
document.getElementById("test").onmouseover = function(e){
e = e || window.event;
var target = e.srcElement || e.target,
children;
if(target.tagName.toLowerCase() === "li") {
children = this.children;
var i = 0,
len = children.length;
for(;i<len;i++){
if(target == children[i]) {
alert("当前下标是：" + i);
return;
}
}
}
};
</script>
直接注册onmouseover事件在ul上，触发mouseover事件时，通过事件冒泡，可以捕获到触发事件的元素，如果触发事件的是li，则通过遍历ul的所有子级li来与当前触发事件的元素匹配，如果遍历到当前触发事件的元素，则可以获取到当前li的索引。
var str ;
$('li').on('click',function(){
console.log(str) ;
str= $(this).index();
})
</script>