我有一个具有相同类的 div
列表。每个 div 包含其他 div,.header
、.body
、.footer
。当我将鼠标悬停在一个 div 内的某个元素上时,例如 .header
,我需要在同一 div 内的另一个 .footer
元素上添加/删除一个类。
问题是当我悬停一个 .header
- 我正在向所有其他 div 内的所有 .footer
元素添加类,但我只需要添加新类到当前 div 中的 .footer
。
$(document).ready(function() {
$('.header').hover(function() {
$('.footer').addClass('active');
}, function() {
$('.footer').removeClass('active');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list">
<div class="list_item">
<div class="header"></div>
<div class="body"></div>
<div class="footer"></div>
</div>
<div class="list_item">
<div class="header"></div>
<div class="body"></div>
<div class="footer"></div>
</div>
<div class="list_item">
<div class="header"></div>
<div class="body"></div>
<div class="footer"></div>
</div>
</div>
最佳答案
您可以在 CSS 中使用 :hover
伪元素和通用的兄弟组合器选择器 ~
.list_item:hover .header:hover ~ .footer {
background: red;
}
<div class="list">
<div class="list_item">
<div class="header">Hover me</div>
<div class="body">B</div>
<div class="footer">F</div>
</div>
<div class="list_item">
<div class="header">Hover me</div>
<div class="body">B</div>
<div class="footer">F</div>
</div>
<div class="list_item">
<div class="header">Hover me</div>
<div class="body">B</div>
<div class="footer">F</div>
</div>
</div>
否则,如果您不能依赖 .footer
作为下一个同级 - 使用 jQuery
jQuery(function($) {
$('.header').hover(function() {
$(this).closest('.list_item').find('.footer').toggleClass('active');
});
});
.active {
background: red;
}
<div class="list">
<div class="list_item">
<div class="header">Hover me</div>
<div class="body">B</div>
<div class="footer">F</div>
</div>
<div class="list_item">
<div class="header">Hover me</div>
<div class="body">B</div>
<div class="footer">F</div>
</div>
<div class="list_item">
<div class="header">Hover me</div>
<div class="body">B</div>
<div class="footer">F</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
关于javascript - 需要在悬停另一个 div 时向 div 添加类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58006505/