jquery实现的mouseover效果

虽然CSS很容易实现a标签以及其他标签的mouseover效果,用:hover这个伪类就可以,但是工作当中发现还是有不方便之处,先不说IE6不支持除了a标签的伪类,如果一个网站很多个页面,并且每个页面上有很多个按钮需要mouseover的效果,那么需要写很多次css。

后来朋友给写了一个jquery插件,直接调用就可以实现mouseover,可用在html各种标签上。

插件代码:

(function($){
    $.fn.overButton = function() {
        return this.each(function(){
            var over_height = $(this).height();
            var over_img =  $(this).css('background-image') != 'none'?$(this).css('background-image')+' no-repeat':'url('+$(this).attr('over-img')+') no-repeat'
            $(this).css({
                height:over_height,
                background:over_img
            }).hover(function(){
                $(this).css({
                    backgroundPosition:'0 -' + over_height + 'px'
                });
            },function(){
                $(this).css({
                    backgroundPosition:'0 0'
                });
            });
        });
    }
})(jQuery);

只要给需要效果的元素上加一个 class=”hover”, 调用方法:

$(function(){
	$(".hover").overButton();
})


One thought on “jquery实现的mouseover效果

Leave a Reply

Your email address will not be published. Required fields are marked *

*