jquery鼠标移动,jquery鼠标移动切换图片
Jquery鼠标移入和移出、点击事件,点击变色,鼠标移出又变回原来的样式
你只要明白事件触发的顺序就知道原因了:当你鼠标移到div上的时候,触发mouseenter事件,点击的时候触发click事件,然后鼠标移走触发mouseleave事件。
创新互联公司是一家专业提供平南企业网站建设,专注与成都做网站、成都网站建设、H5建站、小程序制作等业务。10年已为平南众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。
例如:var
test=0;
$("#div1").delegate("a",
"mouseenter",
function()
{
test=1;
}).delegate("a",
"mouseleave",
function()
{
test=2;
});
$("#div1").delegate("a",
"click",
function()
{
test=3;
});
当你鼠标移动到div上点击之后鼠标再移走,最后触发的事件是mouseleave事件,此时test是2而不是三。你可以测试一下
JQUERY 鼠标移动到某个图标上显示对应DIV
思路:
获取移动2个元素
给第一个元素加上鼠标移入移除事件,
当鼠标移入时,显示div
当鼠标移除时,隐藏div
代码:
head lang="en"
meta charset="UTF-8"
title/title
style
div {width: 100px; height: 100px; background: #ccc;}
#div2 {display: none;}
/style
script src="js/jquery-1.7.2.js"/script
/head
body
div id="div1"/div
div id="div2"/div
/body
script
function over(){
if(!$("#div2").is(":visible")){
$("#div2").show(); //如果元素为隐藏,则将它显现
}else{
$("#div2").hide(); //如果元素为显现,则将其隐藏
}
}
$('#div1').hover(over,over)
/script
jquery中鼠标移上和移开的动作是什么?
mouseover事件于用户把鼠标从一个元素移动到另外一个元素上时触发,mouseout事件于用户把鼠标移出一个元素时触发。\x0d\x0a下面为你详细介绍下jquery中的鼠标事件:\x0d\x0a(1):click事件:click事件于用户在元素敲击鼠标左键,并在相同元素上松开左键时触发;\x0d\x0a$('p').click(function(){\x0d\x0aalert('click function is running\x0d\x0a!');\x0d\x0a});\x0d\x0a(2):dbclick事件:dbclick事件在用户完成迅速连续的两次点击之后触发,双击的速度取决于操作系统的设置。一般双击事件在页面中不经常使用;\x0d\x0a$('p').dbclick(function(){\x0d\x0aalert('dbclick function is running\x0d\x0a!');\x0d\x0a});\x0d\x0a(3):mousedown事件:mousedown事件在用户敲击鼠标键时触发,跟keydown事件不一样,该事件仅在按下鼠标时触发;\x0d\x0a$('p').mousedown(function(){\x0d\x0aalert('mousedown function is\x0d\x0arunning !');\x0d\x0a});\x0d\x0a(4):mouseup事件:mouseup事件在用户松开鼠标时触发,如果在与按下鼠标的元素相同元素上松开,那么click事件也会触发;\x0d\x0a$('p').mouseup(function(){\x0d\x0aalert('mouseup function is running\x0d\x0a!');\x0d\x0a}).click(function(){\x0d\x0aalert('click\x0d\x0afunction is running too !');\x0d\x0a});\x0d\x0a(5):mouseover事件:mouseover事件于用户把鼠标从一个元素移动到另外一个元素上时触发,如果需要知道来自那个元素可以使用,relatedTagrget属性;\x0d\x0a(6):mouseout事件:mouseout事件于用户把鼠标移出一个元素时触发,这包括从父元素移动到子元素上,或者使用键盘跳到元素上。
JQUERY鼠标移动显示相应内容
我猜会继续提问
script type="text/javascript"
var t;
$('.same-name span').animate({top: "0px", opacity: "0"});
$('.same-name i img').hover(function(){
//ImgToggle($(this),true);
$(this).parent().parent().children("span").stop().animate({top: "-16px", opacity: "1"})
},function(){
t=setTimeout("ImgToggle("+$(this).parent().parent().index()+")",400);
console.log($(this).parent().parent().index());
}
)
$('.same-name span').hover(function(){clearTimeout(t)},function(){
$(this).stop().animate({top: "0px", opacity: "0"});
})
function ImgToggle(i){
$('.same-name').parent().children().eq(i).find('span').animate({top: "0px", opacity: "0"});
}
/script
标题名称:jquery鼠标移动,jquery鼠标移动切换图片
网站URL:http://cdiso.cn/article/dsgsioe.html