一個div中添加一個活動類的所有跨度

Question

我有一個div 2跨度爲紐帶，我想在這兩個跨度添加活動類，當鼠標進入容器DIV即FOS-搜索項

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

您應該使用$hover_element事件，而mouseenter和mouseleave

選項1Demo 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'); 
}); 

選項2Demo 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'); 
    }); 

Answer 2

試試這個

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 3

您沒有正確安裝的事件。 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()有兩個功能argumenents爲mousenter和鼠標離開：

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