我有像自动提示这样的Facebook的文本字段和下拉菜单：
<input type="text" id="search" name="search_fld"/> <div id="display"> <div class="display_Box">Luca</div> <div class="display_Box">David</div> <div class="display_Box">Mark</div> <div class="display_Box">...</div> </div>
我的CSS：
.display_Box:hover { background:#3b5998; color:#FFFFFF; }
如何通过向下箭头键将“悬停”状态从我的输入“search_fld”传递到第一个“display_Box”,依此类推所有“display”div？
解决方法
您无法完美地模拟悬停状态..添加具有相同样式的“真实”类无法逃脱：
.display_Box_hover,.display_Box:hover { background:#3b5998; color:#FFFFFF; }
现在这段代码将“导航”元素：
window.displayBoxIndex = -1; $("#search").keyup(function(e) { if (e.keyCode == 40) { Navigate(1); } if(e.keyCode==38) { Navigate(-1); } }); var Navigate = function(diff) { displayBoxIndex += diff; var oBoxCollection = $(".display_Box"); if (displayBoxIndex >= oBoxCollection.length) displayBoxIndex = 0; if (displayBoxIndex < 0) displayBoxIndex = oBoxCollection.length - 1; var cssClass = "display_Box_hover"; oBoxCollection.removeClass(cssClass).eq(displayBoxIndex).addClass(cssClass); }
这将“记住”最后一个“selected”元素的索引并切换到next或prevIoUs元素,使用eq()函数并将上面的类添加到所选元素.