jquery 鼠标滑过改变div背景或图片方法

jquery实现的鼠标滑过按钮改变背景图片,实现容器span等都可以通过动态改变css教程来实现哦。

$(document).ready(function () {
//按钮样式切换
$("#btFeedBack").hover(
function () {
$(this).removeClass("btFeed").addClass("btFeedhover");
},
function () {
$(this).removeClass("btFeedhover").addClass("btFeed");
}
);

});

jquery 鼠标滑过使指定层变色,实现容器span

接$('<li><spa...的 jQuery链
.hover(function(
$(this).parents("div.divbody").eq(0).css("background","颜色值");
//鼠标进入li发生的事情
),function(
//鼠标离开li发生的事情
));

jquery实现的鼠标滑过按钮改变背景图片

<div class="photo">
    <div class="heading"><span>Telephoto Lens</span></div>
    <img src="images/fall.jpg" width="350" height="233" alt="" />
    <div class="caption"><span>A lens for photographing distant objects; it is designed in a compact manner so that the distance from the front of the lens to the film plane is less than the focal length of the lens. </span></div>
</div>

css代码如下：

.photo {
    position:relative;
    font-family:arial;
    overflow:hidden;
    border:5px solid #000;
    width:350px;
    height:233px;
}
.photo .heading, .photo .caption {
    position:absolute;
    background:#000;
    height:50px;
    width:350px;
    opacity:0.6;
}
.photo .heading {
    top:-50px;
}
.photo .caption {
    bottom:-50px;
    left:0px;
}
.photo .heading span {
    color:#26c3e5;
    top:-50px;
    font-weight:bold;
    display:block;
    padding:5px 0 0 10px;
}
.photo .caption span {
    color:#999;
    font-size:9px;
    display:block;
    padding:5px 10px 0 10px;
}

jquery代码如下：

<script type="text/网页特效" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script>
    $(document).ready(function () {

        // transition effect
        style = 'easeOutQuart';

        // if the mouse hover the image
        $('.photo').hover(
            function() {
                //display heading and caption
                $(this).children('div:first').stop(false,true).animate({top:0},{duration:200, easing: style});
                $(this).children('div:last').stop(false,true).animate({bottom:0},{duration:200, easing: style});
            },

            function() {
                //hide heading and caption
                $(this).children('div:first').stop(false,true).animate({top:-50},{duration:200, easing: style});
                $(this).children('div:last').stop(false,true).animate({bottom:-50},{duration:200, easing: style});
            }
        );

    });
</script>