jquery mouse over change div background or picture method

jquery mouse over change div background or picture method

jquery implementation of the mouse over the button to change the background picture, the implementation of container span, etc. can be changed through the dynamic CSS tutorial to achieve OH.

$ (document). Ready (function () {
Button style Toggle
$ ("#btFeedBack"). Hover (
function () {
$ (this). Removeclass ("Btfeed"). AddClass ("Btfeedhover");
},
function () {
$ (this). Removeclass ("Btfeedhover"). AddClass ("Btfeed");
}
);

});

jquery mouse over makes the specified layer color, to achieve container span

Next $ (' <li><spa ... The jquery chain
. Hover (Function (
$ (this). Parents ("Div.divbody"). EQ (0). CSS ("Background", "color value");
Mouse into what happened to Li
), Function (
The mouse left what happened to Li
));

jquery implemented mouse over button to change background picture

<div class= "Photo" >
<div class= "heading" ><span>telephoto lens</span></div>
<div class= "caption" ><span>a lens for photographing distant; It is designed in a compact manner so this distance from the front of the lens to the film plane is less than the Foca L length of the lens. </span></div>
</div>

The CSS code is as follows:

. 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;
}

The jquery code is as follows:

<script type= "text/web Effects" 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>