javascript - 删除父 div 悬停上的按钮类

Question

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

我已经能够在所有 div 上执行此操作，但似乎无法仅对悬停在其上的元素起作用。尝试 $(this).find 没有运气。

     <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>

脚本:

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

在这里，我让它在两个元素上工作，但想将鼠标悬停/删除单个框上的禁用类:FIDDLE

Answer 1

使用 this 引用悬停元素并根据上下文获取元素。

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

<小时/>

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

.box {
    margin: 0 0 1rem 0;
    padding: 1rem;
    border-radius: 0;
    position: relative; 
    overflow: hidden;
    border:1px solid #EFEFF4;
    font-size: 0.9rem;
    line-height: 1.3rem;
}

.box:hover {
    border-color:#59c07b;
    -webkit-transition: all 250ms ease;
    -moz-transition: all 250ms ease;
    -ms-transition: all 250ms ease;
    -o-transition: all 250ms ease;
    transition: all 250ms ease;

}
.disabled{background:white}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>