jQuery鼠标悬浮效果，显示并隐藏层详解

最新推荐文章于 2023-05-18 15:01:38 发布

原创最新推荐文章于 2023-05-18 15:01:38 发布 · 560 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #乔乐共享 #悬浮 #特效 #ViewUI

jQuery 专栏收录该内容

46 篇文章

订阅专栏

本文介绍了一个简单的办公室软件版本选择器的实现方式。该选择器通过鼠标悬停效果展示不同的Office版本选项，包括2003、2007和2010等，方便用户快速选择所需的Office版本。

[img]http://dl.iteye.com/upload/attachment/0068/6268/7c184cbc-fdb2-30e7-8ee5-ae16f62f1405.jpg[/img]


<div class="listtitle fl width120">
								<div id="word_select_value_list" class="listtitle-in">
									office 2007
								</div>
								<input id="word_select_value" value="2007" type="hidden">
								<div style="width: 126px; display: none;" id="bigdiv" class="listtitle-cont2">
									<a href="javascript:getWordSelectType('2007');">office 2007</a>
									<a href="javascript:getWordSelectType('2010');">office 2010</a>
									<a href="javascript:getWordSelectType('2003');">office 2003</a>
								</div>
							</div>


//显示下拉框	
	$("#word_select_value_list").mouseover(function() {
		$(".listtitle-cont2").show();
	}).mouseout(function() {
		$(".listtitle-cont2").hide();
	});

	$(".listtitle-cont2").mouseover(function(){
		$(this).show();
	}).mouseout(function() {
		$(this).hide();
	});