Question

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.

Answer 1

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>