我在一个页面上有几个具有相同类的 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
最佳答案
使用 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>
关于javascript - 删除父 div 悬停上的按钮类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37626753/