Question

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

我已经能够在所有div上执行此操作，但似乎无法使其仅用于悬停的元素。尝试$（this）。没有运气。

     <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引用hovered元素并根据上下文获取元素。

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

<小时/>

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你可以这样做。

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

Answer 3

我不知道您是如何尝试$(this).find()的，但它应该适合您。这是一个演示：

$('button').text(function(){return this.className;}); //this line is for testing.

$('.box').hover(
function() {
    $(this).find('button').removeClass('disabled');
    $('button').text(function(){return this.className;}); //this line is for testing.
},
function() {
    $(this).find('button').addClass('disabled');
    $('button').text(function(){return this.className;}); //this line is for testing.
}
);

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

在父div悬停上删除按钮类

3 个答案: