html列表鼠标悬停,如何将鼠标悬停在一个列表的元素上并显示另一个列表的元素？...

因此，要获得悬停工作，你会式 “.OUTPUT礼”

如果您根本无法更改标记，则需要使用.index()方法找出悬停元素的索引，然后将其与您想要显示的元素的索引关联起来。

请注意，如果您尝试制作下拉菜单效果，则当您将鼠标从主菜单项移开时，您不希望隐藏输出部分，或者您无法点击在子菜单上。

考虑到这一点，它几乎与a question I answered a few days ago中的要求相同。以下是我为该问题发布的代码版本，在您将鼠标停在主菜单上之后，该子代菜单将保留一段时间，以便您有时间在子菜单消失前将鼠标移到子菜单上：

var timerId,

$mainMenuItems = $(".nav li"),

$subMenus = $(".output li");

$mainMenuItems.hover(

function(){

clearTimeout(timerId);

$subMenus.hide();

$($subMenus[$mainMenuItems.index(this)]).hide()

.removeClass('hidden')

.show();

}, function(){

var i = $mainMenuItems.index(this);

timerId = setTimeout(function(){$($subMenus[i]).hide();},500);

}

);

$subMenus.hover(

function() {

clearTimeout(timerId);

},

function() {

$(this).hide();

}

);

而不是明确地设置visibility财产我只是用.hide()和.show()。我知道这超出了你所问的范围，但我认为它会解决你的下一个问题，而且我也不会因为将超时内容从代码中拉出来而烦恼。有关代码如何工作的更详细的解释看看my other answer)