您的位置:首页 > Web前端 > JQuery

jquery 鼠标移过层的显示隐藏

2009-12-15 14:00 316 查看
.nav1, .nav1 ul
{
list-style: none;
margin: 0;
padding: 0;
width: 450px;
}
.nav1
{
margin-top: 0px;
}
.nav1
{
font-family: Arial, Helvetica, sans-serif;
z-index: 100;
position: relative; /**/
}
.nav1 li span.relative
{
position: relative;
}
.nav1 li
{
float: left;
padding: 0 5px;
position: relative; /**/
width: auto;
}
.nav1 li a, .nav1 li a:link, .nav1 li a:active, .nav1 li a:visited
{
font: bold 1.22em/25px Arial, Helvetica, sans-serif;
background: #565656;
color: #959595;
display: block;
float: left;
text-transform: lowercase;
text-decoration: none;
}
.nav1 li a:hover
{
background: #ccc;
color: #fff;
}
#nav-one li:hover a, #nav-one li.sfHover a
{
background: #ccc;
color: #000;
}
#nav-one li:hover ul a, #nav-one li.sfHover ul a
{
background: #565656;
color: #959595;
}
#nav-one li:hover ul a:hover, #nav-one li.sfHover ul a:hover
{
background: #ccc;
color: #000;
}
.nav1 li ul li
{
float: left;
text-align: left;
width: 280px;
height: 20px;
cursor: pointer;
display: block;
overflow: hidden;
white-space: nowrap;
line-height: 1.5em;
}
.nav1 li ul li a
{
display: block;
float: left;
text-align: left;
width: 300px;
color: #186aad;
}
.nav1 li:hover ul, .nav1 li.sfHover ul
{
top: 25px; /*left:261px;*/
left: -209px;
}
.nav1 ul li
{
border: 0;
}
.nav1 ul a
{
border: 1px solid #000;
border-bottom: 0;
width: 80px;
white-space: nowrap;
}
.nav1 ul a:hover
{
background: #ccc;
color: #186aad;
float: left;
}
#spTypeName
{
cursor: pointer;
}

<ul id="nav-one" class="nav1">
<li id="liTypeName" style="display: none;"><span style="width: 75px; height: 24px;
border: 1px solid #bdbf4a; background: #fbfbdb; display: block; overflow: hidden;
white-space: nowrap;" id="spTypeName"></span>
<ul style="color: #186aad;" id="divAddressType">
<%
for (int i = 0; i < listroot.ChildNodes.Count; i++)
{
string typeName = listroot.ChildNodes[i]["TypeName"].InnerText;
string areaName = listroot.ChildNodes[i]["AreaName"].InnerText;
string address = listroot.ChildNodes[i]["address"].InnerText;
string addressInfo = "";
if (listroot.ChildNodes[i]["TypeName"].InnerText != "")
{
addressInfo = "(" + typeName.Trim() + ")/t/t" + areaName.Trim() + "/t/t" + address.Trim();
Response.Write("<li id='spAddressType_" + listroot.ChildNodes[i]["ID"].InnerText + "' onclick='getUserAddressSingle(this.id," + listroot.ChildNodes[i]["userID"].InnerText + ")' title='(" + typeName.Trim() + ")/t/t" + areaName.Trim() + "/t/t" + address.Trim() + "'>" + addressInfo.Trim() + "</li>");
}
else
{
addressInfo = "(" + areaName.Trim() + ")/t/t" + areaName.Trim() + "/t/t" + address.Trim();
Response.Write("<li id='spAddressType_" + listroot.ChildNodes[i]["ID"].InnerText + "' onclick='getUserAddressSingle(this.id," + listroot.ChildNodes[i]["userID"].InnerText + ")' title='(" + areaName.Trim() + ")/t/t" + areaName.Trim() + "/t/t" + address.Trim() + "'>" + addressInfo.Trim() + "</li>");
}
}
%></ul>
</li>
<li><span id="spAreaName" style="overflow: hidden; height: 24px; width: 100px;"></span>
</li>
<span id="lnkCheckOtherArea" onclick="CheckOtherAddress()" style="display: none;
margin-right: -3px; color: Red; cursor: pointer;">[切换]</span>
<%--<li id="Address"></li>--%>
</ul>

$(document).ready(function(){
$("#nav-one li").hover(
function(){ $("ul", this).fadeIn("fast"); },
function() { }
);
if (document.all) {
$("#nav-one li").hoverClass ("sfHover");
}
});

$.fn.hoverClass = function(c) {
return this.each(function(){
$(this).hover(
function() { $(this).addClass(c); },
function() { $(this).removeClass(c); }
);
});
};
$(document).ready(function(){
$("#nav-one li").hover(
function(){ $("ul", this).fadeIn("fast"); },
function() { }
);
if (document.all) {
$("#nav-one li").hoverClass ("sfHover");
}
});

$.fn.hoverClass = function(c) {
return this.each(function(){
$(this).hover(
function() { $(this).addClass(c); },
function() { $(this).removeClass(c); }
);
});
};
function GetMyPosition(data)
{
var str="<a>"+$(data).find("ProvinceName").text()+"</a>><a>"+$(data).find("RegionName").text()+"</a>><span class='t'>"+$(data).find("AreaName").text()+"</span>>";
$("#MyPosition").html(str);
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: