ID #6529

css hover与jquery

hover是鼠标悬停css效果,但在一些浏览器如ie6中,只对<a href=""/>有效。

jQuery可以为我们解决这个问题:

jQuery提供的hover()

方法做为一个事件,不仅可以改变CSS样式的,还可以做其他动作;

非常类似于mouseover mouseout的组合。

代码如下:

$(function(){
           $(".htest").hover(
            function(){
                $(this).css("cursor","pointer");
                $(this).css("color","red");
                $(this).css("position","relative");
                $(this).css("top","2px");
                $(this).css("left","2px");
            },
            function(){
                $(this).css("cursor","pointer");
                $(this).css("color","blue");
                $(this).css("position","relative");
                $(this).css("top","0px");
                $(this).css("left","0px");
            }
            );
          $(".mtest").mouseover(function(){
                $(this).css("cursor","pointer");
                $(this).css("color","red");
                $(this).css("position","relative");
                $(this).css("top","2px");
                $(this).css("left","2px");
            });
            $(".mtest").mouseout(function(){
                $(this).css("cursor","pointer");
                $(this).css("color","blue");
                $(this).css("position","relative");
                $(this).css("top","0px");
                $(this).css("left","0px");
            });
});


2011-07-01 18:54
阅读:
I'm VC , Just U know Y
本站部分文章来源于互联网,版权归原作者所有。

延伸阅读:

浅析jQuery框架与构造对象

使用Grails与jQuery创建Web Calendar

Ajax+jQuery实现LightBox与服务器通信

web前台技术学习总结(1)-CSS实现全浏览器兼容的

google map api与jquery结合使用(1)--控件,监听器