Add classes with Javascript rollover_问答_开发者

开发者 https://www.devze.com 2023-02-02 02:39 出处：网络

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:

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 :)