Question

我有一个带有2个span作为链接的div，我想在鼠标进入容器div时在两个span上添加活动类，即fos-search-items

var $hover_element = $('.fos-search-items');
    .mouseenter(function() {
        $(this).find("span").addClass('fos-db-active');
    })
    .mouseleave(function() {
        $(this).find("span").removeClass('fos-db-active');
    })

Answer 1

试试这个

var $hover_element = $('.fos-search-items');
 $hover_element.mouseenter(function() {
  $( this ).find( "span" ).addClass('fos-db-active');
  })

 $hover_element.mouseleave(function() {
  $( this ).find( "span" ).removeClass('fos-db-active');

  })

Working demo

Answer 2

您尚未正确附加事件。mouseenter和mouseleave应附加到DOM元素jquery object.Like：

$('.fos-search-items').mouseenter(function() {
    $(this).find("span").addClass('fos-db-active');
})
$('.fos-search-items').mouseleave(function() {
    $(this).find("span").removeClass('fos-db-active');
})

另外，你可以使用.hover()与鼠标和鼠标的两个函数对象：

$('.fos-search-items').hover(function(){
   $(this).find('span').addClass('fos-db-active')
},function(){
   $(this).find('span').removeClass('fos-db-active')
});

Answer 3

您应该在$hover_element和mouseenter

时使用mouseleave

选项1 Demo Here

var $hover_element = $('.fos-search-items');

$hover_element.mouseenter(function() {
    $(this).find("span").addClass('fos-db-active');
});

$hover_element.mouseleave(function() {
    $(this).find("span").removeClass('fos-db-active');
});

选项2 Demo Here

只需删除;

后的$('.fos-search-items')即可

var $hover_element = $('.fos-search-items').mouseenter(function() {
        $(this).find("span").addClass('fos-db-active');
    }).mouseleave(function() {
        $(this).find("span").removeClass('fos-db-active');
    });

将活动类添加到div中的所有范围

3 个答案: