Question

我有一个函数，当用户将鼠标悬停在按钮上时，该类具有bg fadesOut和悬停类fadesIn。我还想要更改文本颜色，这是在h3类下的按钮内，但似乎无法触发事件。

我试过$（this）.find（'h3'）removeClass（'gray'）;但没有运气！

这是我的html和jQuery的背景工作，也许我没有使用父和子事件正确调用它？

HTML

<div class="cta light-grey-bg">
   <h3 class="uppercase grey center">
   PHP Anchor link here
   </h3>
</div>

的jQuery

$('.cta').hover(function(){
   $(this).removeClass('light-grey-bg', 800);
   $(this).addClass('light-grey-bg-fade', 400);

}, function(){
   $(this).addClass('light-grey-bg', 400);
   $(this).removeClass('light-grey-bg-fade', 800);
});

正如我所说的上面的功能有效，但没有运气去除h3类灰色？任何建议都会很棒。

Answer 1

语法错误

$(this).find('h3').removeClass('grey'); //missing .

演示：Fiddle

例如：

$('.cta ').hover(function(){
    $(this).removeClass('light-grey-bg', 800).addClass('light-grey-bg-fade', 400).find('h3').removeClass('grey'); 

}, function(){
    $(this).addClass('light-grey-bg', 400).removeClass('light-grey-bg-fade', 800).find('h3').addClass('grey'); 
});

Answer 2

首先是几条经验法则：

除非您需要，否则切勿在选择器中使用空格
始终引用您的元素，而不是从DOM重新获取它

接下来，您正在使用removeClass和addClass，就好像他们有第二个参数一样，但它们没有，因为API文档清楚地说明了这一点：

http://api.jquery.com/removeClass/ http://api.jquery.com/addClass/

请注意，第二个参数仅用于jQuery UI，这意味着持续时间，与其他属性相同，类似于jQuery的本机animate函数（您没有指定使用UI）。 http://api.jqueryui.com/addClass/

但是，您可以一次添加或删除mroe类，只需用空格分隔它们，如下所示：

$element.addClass('one two three four');

现在，问你的解决方案：

你正在选择你的父“.cta”，这很好，但是你正在切换那些元素类。您提供的解决方案应该可以正常工作......

var $cta = $('.cta'),
    $h3 = $cta.find('h3');

$cta.hover(
    function() {
        $h3.toggleClass('light-grey-bg light-grey-fade');
    },
    function() {
        $h3.toggleClass('light-grey-bg light-grey-fade');
    }
);

看看我在哪里重新使用$ cta和$ h3？这对浏览器非常友好。除此之外，如果您的文档类不一致，仍然使用add-和removeClass代替toggleClass，您将更安全。

添加和删除重复的类

2 个答案:

添加和删​​除重复的类

2 个答案:

添加和删除重复的类