Add classes with Javascript rollover
I want to add a group of classes ontop of an image that only appear when the user rolls over.
Please see this as a working example:
http://www.warface.co.uk/clients/warface.co.uk/ (CLICK the red arrow at the top)
You will notice a horizontal list of images and text, desired effect will list all images and the yellow block with text will be the rollover effect.
CSS
<li><a class="project-thumb"><img src="images/_scroll1s.jpg" alt="">
The London Police</a></li>
<li><div class="project-thumb">
<div class="content">
<h2>The London Police</h2></a>
<a class="view-project">View Project</a>
</d开发者_开发技巧iv><!--content END -->
</div><!--project-thumb END -->
</li></ul>
Could you please advise on the correct markup for the javascript replacement effect.
Many thanks
I recommend that you use a javascript library like jQuery. jQuery makes it insanely easy to do a class change on a hover event.
Add jquery in your
<head>tag. Use the one from googles CDN:<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>Add something like this:
<script> $(document).ready(function() { // find the image inside the link with the class project-thumb and add a hover event $("a.project-thumb img").hover( function () { // add a class to the closest li. $(this) is the image $(this).closest('li').addClass('theClassYouWantToAdd'); }, function () { $(this).closest('li').removeClass('theClassYouWantToRemove'); } ); }); </script>
Documentation for the hover event: http://api.jquery.com/hover/
That should work :)
加载中,请稍侯......
精彩评论