昨天在写一个项目的时候发现了一个比较蛋疼的问题。就是在写一个鼠标移入移出的效果的时候发现在用mouseover和mouseout会有些诡异的效果
$(function(){$("#header .more1").hover(function(){
$("#header .more").show();
},function(){
$("#header .more").hide();
})
})
但是 一点都不管用，mouseover和mouseout方法和hover一样就不说了，然后我又用了mouseenter和mouseleave方法，当我满心鼓舞的发现可以解决问题的时候新的问题又来了，就是在离开更多这个选项框的时候下面的框框并不会消失
那我就是只有用click()了 代码如下：
//click方法
(function(){
var more=$("#header .more1");
more.bind("click",function(){
if ($("#header .more").is(":visible")) {
$("#header .more").hide();
}else{
$("#header .more").show();
}
})
})();
只有这样才能实现，也是够蛋疼的，也许是我还没找到错误的地方吧；贴出完整代码：
//html部分
<div id="header" class="gradient">
<p class="city">
切换区域：
<a href="###">西湖区</a>
<a href="###" class="active">东湖区</a>
<a href="###">青山湖区</a>
<a href="###">青云谱区</a>
<a href="###">湾里区</a>
<a href="###" class="more1">更多</a>
</p>
<p class="more">
<a href="###">新建县</a>
<a href="###">安义县</a>
<a href="###">南昌县</a>
<a href="###">进贤县</a>
</p>
</div>
//css部分
#header .more{
width: 190px;
height: 70px;
position: absolute;
top:30px;
left: 350px;
z-index: 4;
background: #F7F7F8;
display: none;
}
#header .more a{
display:inline-block;
padding:0 7px;
margin: 5px 3px;
height:18px;
line-height:18px;
color:#999;
background:#fff;
border:1px solid #e5e5e5;
border-radius:4px;
box-shadow:1px 1px 0 #ededed;
}
//js部分
// (function(){
//
var more=$('#header .more1');
//
var more_a=$('#header .more');
//
more.mouseenter(function(){
//
$('#header .more').css('display','block');
//
})
//
more_a.mouseleave(function(){
//
$('#header .more').css('display','none');
//
})
// })();
顺便再说下mouseenter和mouseover，mouseleave和mouseout的区别：
1.不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
2.只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。