CODEWITHSUNDEEP
jquery
nasty
nasty

Reputation: 7087

How to append a class when hovered on a span

My HTML

<span class="lead_button">
  <img class="NFButtonLeft" src="/templates/web/images/0.png">
  <button type="submit" class="NFButton" id="cf_ce-submit-button">Send</button>
  <img src="/templates/web/images/0.png" class="NFButtonRight">
</span>

What I am trying to do is, when some one hover over the span I want to add appednd a class called NFh to the images and button . So the final output will look like this

<span class="lead_button">
  <img class="NFButtonLeft NFh" src="/templates/web/images/0.png">
  <button type="submit" class="NFButton NFh" id="cf_ce-submit-button">Send</button>
  <img src="/templates/web/images/0.png" class="NFButtonRight NFh">
</span>

How can I achieve this with jQuery? Thanks heaps.

Upvotes: 0

Views: 60

Answers (5)

Tahir Yasin
Tahir Yasin

Reputation: 11709

This is exactly what you need.

<script>
$(document).ready(function() {
    $('.lead_button').hover(function(){
        $(this).children().each(function(){
            $(this).addClass("NFh");

        });
    });
    $('.lead_button').mouseout(function(){
        $(this).children().each(function(){
            $(this).removeClass("NFh");

        });
    });
});
</script>
<span class="lead_button">
    <img class="NFButtonLeft" src="/templates/web/images/0.png">
    <button type="submit" class="NFButton" id="cf_ce-submit-button">Send</button>
    <img src="/templates/web/images/0.png" class="NFButtonRight">
</span>

Upvotes: 1

Murali Murugesan
Murali Murugesan

Reputation: 22619

Try

$(document).ready(function() {
    $('span.lead_button').hover(function() {
        $(this).find('img, button').removeClass('NFH').addClass('NFH');
    });
});​

Upvotes: 0

Sushanth --
Sushanth --

Reputation: 55750

You can use .find() function to capture the button and image elements inside the span.

$('span.lead_button').hover(function(){  
      $(this).find('img, button').addClass('NFH'); 
});

Check Fiddle

Upvotes: 0

jogesh_pi
jogesh_pi

Reputation: 9782

$('.lead_button').hover(
    // Event on Mouse Hover
    function(){
       $(this).find('img').addClass('NFh');
       $(this).find('#cf_ce-submit-button').addClass('NFh');
    }, 
   // Event on Mouse Out
   //function(){
      // Event goes here
   //}
);

Upvotes: 0

Syuaa SE
Syuaa SE

Reputation: 1681

$("span").hover(function() {
    $(this).children().addClass("NFh");
});

Upvotes: 0

Related Questions