SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery: addClass

    Seems like I have a jQuery question everyday! haha ... Here's the HTML:

    HTML Code:
    <!-- Sub video -->
    <div class="sub-video">
    
    <a href="#" id="yoga01"><span class="btn-play">Play</span><img src="img/yoga01.jpg" width="150" height="91" alt="Vidéo" title="Vidéo" />
    </a>
    
    <p>Boot camp <br/> <span class="author">With Diana "Dianamite" Destounis</span></p>
    
    </div><!-- Sub video -->
    Basically what I want to is add a class to ".btn-play" when ".sub-video a" is hovered.

    I tried this code (see below) but when I have a multiple ".sub-video" blocks they all get the class. What is the solution to only apply the element that follow ".sub-video a". Thanks!

    Code JavaScript:
    	$('.sub-video a').hover(function() {
    		$('.btn-play').addClass('hover');
    		}, function() {
    		$('.btn-play').removeClass('hover');
    	});

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    You restrict the selector to the context of the hovered link.

    Code javascript:
    $('.btn-play', this)

    See: http://api.jquery.com/jQuery/
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    You restrict the selector to the context of the hovered link.

    Code javascript:
    $('.btn-play', this)

    See: http://api.jquery.com/jQuery/

    Thanks again pmw57, you saved me! I will definitely read this!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •