LESSON 2: JQUERY HOVER EFFECT

LESSON 2




jQuery Hover Effect: The CSS




Ceating a Hover Effect Using jQuery: The CSS


The CSS that we will use in this example is not very extensive since most of the work is being done by the HTML and the JavaScript. It will be used to define the class of images and give some dimension to the divs and center them on the page. The CSS for our hover effect will look something like this:


.swap {
height:333px;
width:500px;
border: 2px solid white;
}

#imagecontainer {
width:600px;
margin-top:50px;
margin-left:auto;
margin-right:auto;
}

The rest of the stylesheet will be standard CSS that will define selectors and give addtibutes to different sections.

Next we will see the hover effect in action!

PREVIOUS: jQuery Hover
NEXT: Hover Finished