当鼠标进入li标签，给标签中的img元素加缩放效果

最近在做h5开发的时候有一个要求：当鼠标进入li标签的时候，需要给li标签中的img元素加缩放效果！请注意，不是给li标签本身添加缩放效果！

我们都知道直接给img加缩放效果是十分简单的，代码如下：

/**
鼠标放上，图片变大
*/
#nav_group li img:hover {
    transform-origin: center center;
    transform: scale(1.1, 1.1);
    -webkit-transform-origin: center center;
    -webkit-transform: scale(1.1, 1.1);
    -moz-transform-origin: center center;
    -moz-transform: scale(1.1, 1.1);
    -o-transform-origin: center center;
    -o-transform: scale(1.1, 1.1);
    -ms-transform-origin: center center;
    -ms-transform: scale(1.1, 1.1);
}

首先是自定义导航栏的结构：

<ul id="nav_group">
    <li class="animate">
        <div>
            <div class="portrait">
                <img class="animate" src="img/cdr_z.png">
            </div>
            <div class="text"></div>
        </div>
    </li>
 <li class="animate">
        <div>
            <div class="portrait">
                <img class="animate" src="img/cdr_z.png">
            </div>
            <div class="text"></div>
        </div>
    </li>
<ul>

如果我们要想捕捉li标签的mouseenter和mouseleave事件，然后来改变其中的内容的属性，这就得用到jQuery代码了通过给li标签添加mouseenter和mouseleave事件，就能达到效果，代码如下：

 /*鼠标进入事件
     * 与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，
     * 才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，
     * 同样会触发 mouseover 事件
     * */
    $("#nav_group li").mouseenter(function () {
        console.log("over");
        $(this).children().children("div.portrait").children("img.animate").removeClass("imghoverout");
        $(this).children().children("div.portrait").children("img.animate").addClass("imghover");
    });
    /*鼠标离开事件
     * 与 mouseout 事件不同，只有在鼠标指针离开被选元素时，
     * 才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，
     * 同样会触发 mouseout 事件
     * */
    $("#nav_group li").mouseleave(function () {
        console.log("out");
        $(this).children().children("div.portrait").children("img.animate").removeClass("imghover");
        $(this).children().children("div.portrait").children("img.animate").addClass("imghoverout");
    });

下面是以上两种效果imghover和imghoverout的CSS代码：

.imghover{
    transform-origin: center center;
    transform: scale(1.1, 1.1);
    -webkit-transform-origin: center center;
    -webkit-transform: scale(1.1, 1.1);
    -moz-transform-origin: center center;
    -moz-transform: scale(1.1, 1.1);
    -o-transform-origin: center center;
    -o-transform: scale(1.1, 1.1);
    -ms-transform-origin: center center;
    -ms-transform: scale(1.1, 1.1);
}
.imghoverout{
    transform-origin: center center;
    transform: scale(1.0, 1.0);
    -webkit-transform-origin: center center;
    -webkit-transform: scale(1.0, 1.0);
    -moz-transform-origin: center center;
    -moz-transform: scale(1.0, 1.0);
    -o-transform-origin: center center;
    -o-transform: scale(1.0, 1.0);
    -ms-transform-origin: center center;
    -ms-transform: scale(1.0, 1.0);
}

这样就达到了控制控制img效果的目的^_^！