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

http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js

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


<style>
  .largeImage { height:200px;border:#999999 dotted 3px; }
</style>


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


<div height="100px">

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


<script>
    $(".imgS").hover(function () {
      $(".imgS").toggleClass("largeImage");
    });
</script>