Javascript 移除父div悬停上的按钮类

我在同一个类的页面上有几个div，其中包含一些默认禁用的按钮。目标是突出显示悬停时的一个div，并从按钮中删除“disabled”类

我已经能够在所有的div上都这么做了，但似乎无法让它只在悬停的元素上工作。尝试了$（此）。没有运气就找到了

     <div class="large-12 columns">
      <div class="box">
            <button class="button disabled expanded">Button</button>
      </div>
    </div>

    <div class="large-12 columns">
      <div class="box">
            <button class="button disabled expanded">Button</button>
      </div>
    </div>

---

这里我让它在两个元素上工作，但希望悬停/删除单个框上的禁用类：

使用

this

引用悬停的元素并根据上下文获取元素

$('.box').hover(
  function() {
    $('.button', this).removeClass('disabled');
  },
  function() {
    $('.button', this).addClass('disabled');
  }
);

---

$（'.box'）。悬停(
函数（）{
$（'.button'，this.removeClass（'disabled'）；
},
函数（）{
$（'.button'，this.addClass（'disabled'）；
}
);
.box{
保证金：0.01雷姆0；
填充：1rem；
边界半径：0；
位置：相对位置；
溢出：隐藏；
边框：1px实心#EFEFF4；
字体大小：0.9rem；
线高：1.3rem；
}
.box:悬停{
边框颜色：#59c07b；
-webkit过渡：所有250ms轻松；
-moz转换：所有250ms的易用性；
-毫秒转换：所有250毫秒的轻松；
-o型转换：所有250ms的易用性；
过渡：所有250ms缓解；
}
.disabled{背景：白色}

按钮
按钮
使用
此
引用悬停的元素并根据上下文获取元素

$('.box').hover(
  function() {
    $('.button', this).removeClass('disabled');
  },
  function() {
    $('.button', this).addClass('disabled');
  }
);


$（'.box'）。悬停(
函数（）{
$（'.button'，this.removeClass（'disabled'）；
},
函数（）{
$（'.button'，this.addClass（'disabled'）；
}
);
.box{
保证金：0.01雷姆0；
填充：1rem；
边界半径：0；
位置：相对位置；
溢出：隐藏；
边框：1px实心#EFEFF4；
字体大小：0.9rem；
线高：1.3rem；
}
.box:悬停{
边框颜色：#59c07b；
-webkit过渡：所有250ms轻松；
-moz转换：所有250ms的易用性；
-毫秒转换：所有250毫秒的轻松；
-o型转换：所有250ms的易用性；
过渡：所有250ms缓解；
}
.disabled{背景：白色}

按钮
按钮
您可以这样做

$('.box').hover(
    function() {
        $(this).find('.button').removeClass('disabled')
    },
    function() {
        $(this).find('.button').addClass('disabled')
    }
);

你可以这样做

$('.box').hover(
    function() {
        $(this).find('.button').removeClass('disabled')
    },
    function() {
        $(this).find('.button').addClass('disabled')
    }
);

我不知道您是如何尝试
$（this）.find（）
，但它应该适合您。下面是一个演示：


$（'button'）.text（函数（）{返回this.className；}）//这条线是用来测试的。
$（'.box'）。悬停(
函数（）{
$（this）.find（'button'）.removeClass（'disabled'）；
$（'button'）.text（function（）{return this.className；}）；//此行用于测试。
},
函数（）{
$（this）.find（'button'）.addClass（'disabled'）；
$（'button'）.text（function（）{return this.className；}）；//此行用于测试。
}
);

按钮
按钮
我不知道您是如何尝试的
$（this）.find（）
，但它应该适合您。下面是一个演示：


$（'button'）.text（函数（）{返回this.className；}）//这条线是用来测试的。
$（'.box'）。悬停(
函数（）{
$（this）.find（'button'）.removeClass（'disabled'）；
$（'button'）.text（function（）{return this.className；}）；//此行用于测试。
},
函数（）{
$（this）.find（'button'）.addClass（'disabled'）；
$（'button'）.text（function（）{return this.className；}）；//此行用于测试。
}
);

按钮
按钮
你是说这个吗？~哦，我是如此接近！非常感谢。你的问题是你尝试了
$（这个）。找到
，为什么它不在你发布的代码中？我应该在代码中包含它。我错误地使用了.box.button而不是.button，因为我已经用（this）引用了box元素。你是说这个吗？~哦，我是如此接近！非常感谢。你的问题是你尝试了
$（这个）。找到
，为什么它不在你发布的代码中？我应该在代码中包含它。我错误地使用了.box.button而不是.button，因为我已经用（这个）引用了box元素。