UW3C首页 > CSS > CSS实现JS鼠标经过替换图片效果

CSS实现JS鼠标经过替换图片效果

阅读：7570 次编辑日期：2013-12-06

概述：

在工作中，我们经常会用到一个效果，就是鼠标经过之后图片替换的效果，如果要是让大家写这个效果首先想到的方法是什么？我觉得80%的人会说JS或者CSS的背景定位，没错~用jQuery的hover效果很简单就能实现，用背景定位也不难。

JS方法：

JS的方法也很多，就说一个，用hover；

    $("#uw3c").hover(function(){
        $(this).attr("src","http://www.uw3c.com/img1.jpg");
        },funciton(){
        $(this).attr("src","http://www.uw3c.com/img2.jpg");
    })

鼠标经过时图片为img1，离开时为img2。

背景定位的方法：

先说一下，北京定位是将背景图片左上角的原点，放置在规定的位置

   a{ padding:5px;background:url("http://www.uw3c.com/img1.jpg") 0 0};
   a:hover{ background:url("http://www.uw3c.com/img1.jpg") 10px 0};

当hover事件的时候改变北京定位的位置。

margin的负值的方法：

以上是我们比较常用的两种方法了，但是我们今天着重介绍的是下面这种方法，使用margin的负值：

CSS://
    a:hover{
        background: none;
    }
    a{
        text-indent:0px;width: 125px;
        float:left; display: block;
        overflow:hidden;
    }
    a:hover img{
        margin-left: -125px;
    }
HTML://