设计目标:鼠标放在查询上面,在查询的下面弹出相应的div层信息,鼠标离开查询隐藏div如果进入div依然显示div 光标离开div层就隐藏div层信息。其余的功能可以模仿此代码。
第一步: 设计一个div对象放入html页面中并设置相应的属性 <span id = "peizhi">查询</span><div id="mydiv1" class="na"></div>
例如:
.na{
position:absolute; // 这里一定要绝对定位
display:none;
border:1px solid silver;
background:silver;
border-radius: 5px;
padding-left:10px;
padding-right:10px;
padding-top:10px;
padding-bottom:10px;
background-color: #FFFFFF;
}
position:absolute; // 这里一定要绝对定位
display:none;
border:1px solid silver;
background:silver;
border-radius: 5px;
padding-left:10px;
padding-right:10px;
padding-top:10px;
padding-bottom:10px;
background-color: #FFFFFF;
}
// 显示div 并设置位置
function show() {
var X = $('#peizhi').offset().top;
var Y = $('#peizhi').offset().left;
$("#mydiv1").css("display","block");
$("#mydiv1").css("left", Y);
$("#mydiv1").css("top", X+12);
}
function show() {
var X = $('#peizhi').offset().top;
var Y = $('#peizhi').offset().left;
$("#mydiv1").css("display","block");
$("#mydiv1").css("left", Y);
$("#mydiv1").css("top", X+12);
}
// 隐藏div
function hide() {
$("#mydiv1").css("display", "none");
}
function hide() {
$("#mydiv1").css("display", "none");
}
//功能:鼠标放上去显示固定div 鼠标开隐藏div
$(function(){
// 鼠标的光标事件
$('#peizhi').hover(function(){
show();
},function(){
hide();
});
$('#mydiv1').hover(function(){
show();
},function(){
hide();
});
});
$(function(){
// 鼠标的光标事件
$('#peizhi').hover(function(){
show();
},function(){
hide();
});
$('#mydiv1').hover(function(){
show();
},function(){
hide();
});
});