-1

我有一个功能，当用户将鼠标悬停在按钮上时，具有 bg 的类会淡出，而悬停类会淡入。我还希望更改文本颜色，这是在 h3 类下的按钮内，但似乎无法触发事件。

我试过 $(this).find('h3')removeClass('grey'); 但没有运气！

这是我的 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 类灰色没有运气？任何建议都会很棒。

4

2 回答 2

1

存在语法错误

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

演示：小提琴

前任：

$('.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'); 
});
于 2013-08-01T13:49:49.453 回答
0

首先有几个经验法则：

  • 除非你需要，否则不要在选择器中使用空格
  • 始终引用您的元素，而不是从 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-andremoveClass而不是toggleClass.

于 2013-08-01T13:52:52.590 回答