整体思路：可以用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>上面时，效果图如下：
第一：js进行鼠标悬停事件来处理DOM实际上是不合理的。对于界面交互上能通过css处理的事件就不要用js来处理；
第二：恰好css对于鼠标悬停是有对应的选择器及其处理；
处理方法：如图A：
假设A的id为a，css代码如下：
#a{width:100px
height:36px
float:left
}
//对于位置的固定可以自行选择处理,当前用float固定。
#a:hover{
width:200px
}
结果将会如你图中所需要的完成。
如必须用JS处理的话，代码如下：
//既定a的样式已明确：//html代码:
<span id='a' onmouseover="fc1(this)"
onmouseout="fc2(this)"></span>
<script>
function fc1(node){
node.style.width = '200px'
}
function fc2(node){
node.style.width = '100px'
}
</script>
触发keydown事件需要控件获取到焦点，div控件无法像input控件那样获取到焦点，无法触发keydown事件，因此可以将keydown事件绑定在document上，然后用div的hover事件去判断鼠标是否正在div上。
<!DOCTYPE html><!--STATUS OK-->
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta http-equiv="content-type" content="text/htmlcharset=utf-8" />
<meta property="wb:webmaster" content="3aababe5ed22e23c" />
<meta name="referrer" content="always" />
<title>s鼠标悬浮事件嵌套键盘事件问题，点击空格并没有响应，求大神来帮助！_百度知道</title>
<style>
.divTest { width: 200px height: 200px border: 1px solid #CCC }
</style>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var divFocus = false
$(function () {
$(".divTest").hover(function () {
divFocus = true
$(".divTest").text(2)
}, function () {
divFocus = false
$(".divTest").text("")
})
$(document).keydown(function (event) {
if (!divFocus) {
return
}
if (event.keyCode != 32) {
return
}
$(".divTest").text(101)
})
})
</script>
</head>
<body>
<div class="divTest"></div>
</body>
</html>
