Question

我的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>

我想要做的是，当我要hover span的某个人NFh添加一个名为images的{{1}}类button和{{1}时}。所以最终输出看起来像这样

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

如何使用jQuery实现这一目标？谢谢你。

Answer 1

这正是您所需要的。

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

Answer 2

尝试

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

Answer 3

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

Answer 4

$('.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
   //}
);

Answer 5

您可以使用.find()功能捕捉范围内的按钮和图像元素。

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

<强> Check Fiddle

如何在跨度上悬停时附加一个类

5 个答案: