jQuery CSS Rollover

jQuery CSS Rollover

Create a jQuery Rollover by toggling the CSS class property of an image , text or other content .

Custom rollover Effect using jQuery can be achieved by toglling the CSS class of the Object.

In this example of the CSS Rollover an image is used . The CSS rollover changes the height and border of the image, which is triggered by the image hover method.

 jQuery Methods : hover(); and toggleClass();

 Toggle CSS Class jQuery Toggle CSS Class

An Example of jQuery CSS rollover

Google APi Library


HTML Box Example Code:

Copy and paste the code below and Insert > HTML Box in your Google Sites webpage.

jQuery Methods
CSS Defined Class
jQuery CSS Class Selector

  .largeImage { height:200px;border:#999999 dotted 3px; }

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js"></script>

<div height="100px">

<img src="/image.png" class="imgS"/>

    $(".imgS").hover(function () {