JSer对象 hover(args1, args2)
描述:
这是一个鼠标响应元素样式的快捷实现. 就像CSS样式a:hover效果那样,将根据鼠标的移入(mouseover)和移出(mouseout)动作显示不同的样式.
参数:
此方法接收两个必须的参数args1和args2, 可以是以下三种类型之一,两个参数类型必须一致:
参数 类型 说明
args1

args2
string 当参数为字符时,此字符串将作为样式名称(class)置换到当前的元素.
object 当参数为对象时,将视之为"名称/值"的样式对象,并将此样式对象添加到当前元素.
function 当参数是一个函数时,将在hover响应时,执行这个函数。
返回:
JSer 当前的JSer对象。
特别提示:
  当您使用了此方法后,JSer将为元素添加一个名为"hover"的自定义事件处理函数,以方便您通过调用.on("hover")来使DOM元素在hover动作发生之前呈现的样式与hover动作发生之后呈现的样式保持一致.实现上,添加的这个事件函数和hover动作发生之后(即mouseout)时所执行的函数完全一致.但是,您并不能通过调用.mouseout()来替代.on("hover"),这是因为,当您调用.mouseout()时,可能还会执行已绑定到该元素的其它mouseout事件处理函数,而on("hover")则不会出现这种问题.
示例1:
css代码:
.hoverOn{border:1px red solid;}
.hoverOff{border:1px gray solid;}
js代码:
JSer(":input").hover("hoverOn", "hoverOff").on("hover");//on("hover")不是必须的(下同)
上面的JS代码等效于:
JSer(":input").on({
    mouseover: function(){
        JSer(this).addClass("hoverOn").removeClass("hoverOff");
    },
    mouseout: function(){
        JSer(this).addClass("hoverOff").removeClass("hoverOn");
    },
    hover: function(){
        JSer(this).addClass("hoverOff").removeClass("hoverOn");
    }
}).on('hover');
示例2:
js代码:
JSer(":input").hover(
    {border:"1px red solid"},
    {border:"1px gray solid"}
).on("hover");
hover方法传入的是两个对象,则作为CSS样式添加到:input元素,上面的代码等效于:
JSer(":input").on({
    mouseover: function(){
        JSer(this).css({border:"1px red solid"});
    },
    mouseout: function(){
        JSer(this).css({border:"1px gray solid"});
    },
    hover: function(){
        JSer(this).css({border:"1px gray solid"});
    }
}).on('hover');
示例3:
js代码:
JSer(":input").hover(
    function(){ JSer(this).css("border", "1px red solid"); },
    function(){ JSer(this).css("border", "1px gray solid"); }
).on("hover");
hover方法传入的是两个函数,则hover动作发生时,将执行这两个函数,上面代码等效于:
JSer(":input").on({
    mouseover: function(){
        JSer(this).css("border", "1px red solid");
    },
    mouseout: function(){
        JSer(this).css("border", "1px gray solid");
    },
    hover: function(){
        JSer(this).css("border", "1px gray solid");
    }
}).on('hover');
请参考:
active(args1, args2)