当有人将鼠标悬停在同一个 div 中的超链接上时,我正在尝试为图标添加悬停效果,但使用当前代码,该名称的 div 中的所有图标都被悬停了。
例如。当有人将鼠标悬停在第一个 div 的超链接上时,它应该只向 fa-shield 图标添加悬停效果。 当前 HTML -
<div class="features">
<i aria-hidden="true" class="fa fa-shield"></i>
<h2>Lorem</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<a class="no-border" href="#0">Read More →</a>
</div>
<div class="features">
<i aria-hidden="true" class="fa fa-heart"></i>
<h2>Lorem</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<a class="no-border" href="#0">Read More →</a>
</div>
当前的 Jquery -
$(".features a.no-border").mouseover(function() {
$(".features i").css({
background: '#21c2f8',
transition: '.5s'
});
});
$(".features a.no-border").mouseleave(function() {
$(".features i").css({
background: '#1a1c28',
transition: '.5s'
});
});
最佳答案
从 this
上下文中,在 .siblings()
中搜索图标 i
:
$(".features a.no-border").mouseover(function() {
$(this).siblings("i").css({
background: '#21c2f8',
transition: '.5s'
});
});
$(".features a.no-border").mouseleave(function() {
$(this).siblings("i").css({
background: '#1a1c28',
transition: '.5s'
});
});
关于javascript - 如何在Jquery中为同一类的不同div中的特定元素添加悬停效果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41768077/