在IE7中firefox浏览器上可以使用伪劣:hover来显示导航效果,但是IE6并不支持除超链接外的元素使用这个伪类。在IE六下 hover css 无法运行
#navigation ul li:hover ul{
background-color:#88c366;
position:absolute;
widht:100px;
display:block;
}
为<li>元素添加hover事件,jQuery代码如下:
$(function(){
$(
"#navigation ul li:has(ul)"
).hover(function(){
$(
this
).children(
"ul"
).stop(
true
,
true
).slideDown(400);
},function(){
$(
this
).children(
"ul"
).stop(
true
,
true
).slideUp(
"fast"
);
});
})
展开关闭
$(function(){
$(
".module_up_down"
).toggle(function(){
var $self = $(
this
);
$self.prev().slideToggle(600,function(){
$(
"img"
,$self).att(
"scr"
,
"images/up.gif"
);
})
},function(){
var $slef=$(
this
);
$self.prev().slideToggle(600,function(){
$(
"img"
,$self).attr(
"src"
,
"images/down.gif"
);
});
})
})
var scrollTimer= setInterval(function(){
scrollNews(x);
},3000);
$(
".scrollNews"
).hover(function(){
clearInterval(scrollTimer);
},function(){
scrollTimer= setInterval(function(){
scrollNews(x);
},3000);
});
var scrollTime=setInterval(function(){
scrollTimes(x);
},3000);
function scrollNews(obj){
var $self = obj.find(
"ul:first"
);
var lineHeight = $self.find(
"li:first"
).height();
$self.animate({
"marginTop"
:-lineHeight+
"px"
},600,function(){
$self.css({marginTop:0}).find(
"li:first"
).appendTo($self);
});
}
$(function()){
var $
this
= $(
".scrollNews"
);
$
this
.hover(function(){
clearInterval(scrollTimer);
},function(){
scrollTimer= setInterval(function(){
scrollNews($
this
);
},3000);
});
var scrollTimer = setInterval(function(){
scrollNews($
this
);
},3000);
}
$(function(){
var $
this
= $(
".scrollNews"
);
$
this
.hover(function(){
clearInterval(scrollTimer);
},function(){
scrollTimer= setInterval(function(){
scrollNews($
this
);
},3000);
});
var scrollTimer = setInterval(function(){
scrollNews($
this
);
},3000);
});
function scrollNews(obj){
var $self = obj.find(
"ul:first"
);
var lineHeight = $self.find(
"li:first"
).height;
$self.animate({
"marginTop"
:-lineHeight+
"px"
},600,function(){
$self.css({marginTop:0}).find(
"li:first"
).appendTo($self);
})
}
hover() 方法得含义是鼠标滑入滑出,它对应着2个事件,即mouseenter和mouseleave,因此可以通过trigger(
"mouseleave"
)函数来触发hover事件的第2个函数
$(function(){
var $
this
= $(
".scrollNews"
);
var scrollTimer;
$
this
.hover(function(){
clearInterval(scrollTimer);
},function(){
setInterval(function(){
scrollNews($
this
);
},3000)
}).trigger(
"mouseleave"
);
});
避免scrollTimer作为一个全局变量而造成代码冲突。