jQuery CSS RolloverCreate 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();
An Example of jQuery CSS rollover
|
Google APi Libraryhttp://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>
|
|