当仅将。悬停时,如何添加更多类来触发?
例如:将鼠标悬停在.button a上会将类添加到另一个对象。
jQuery('.button a').hover(
function () {
jQuery(this).parent().parent().parent().addClass('over');
},
function () {
jQuery(this).parent().parent().parent().removeClass('over');
}
);
最佳答案
我将使用 jquery data并执行以下操作:
jQuery('.button a').hover(
function () {
jQuery(this).parent().parent().parent().addClass('over');
var target1 = jQuery('.elem a').addClass('small');
var div1 = jQuery('.first-div').addClass('firstdiv');
var div2 = jQuery('.second-div').addClass('seconddiv');
$(this).data('first', div1);
$(this).data('second',div2);
$(this).data('target',target1);
},
function () {
jQuery(this).parent().parent().parent().removeClass('over');
$(this).data('target').removeClass('small');
$(this).data('first').removeClass('firstdiv');
$(this).data('second').removeClass('seconddiv');
}
);
.over {
font-weight: Bold;
font-size: 40px;
}
.small {
font-style: italic;
font-size: 12px;
}
.firstdiv{
color: red;
}
.seconddiv {
color: green;
}
.first-div, .second-div {
font-size: 18px;
font-weight: normal;
}
.changefont {
font-size: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="button">
<a href="#"> BIG</a>
</div>
<div class="elem">
<a href="#">ME TOO</a>
</div>
<div class="first-div">
First Div
</div>
<div class="second-div">
Second Div
</div>
编辑:
我添加了额外的div来演示用法,以防其他人最终出现在这里。
关于javascript - jQuery将类更改为多个div,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/39625748/