在父div懸停上刪除按鈕類

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');
  }
);

---

 $('.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> 

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>