How to add hover effect to specific elements in different divs of same class in Jquery?

Question

I'm trying to add hover effect to icons when someone hover over hyperlink in same div but with current code all icons in div of that name are getting hovered.

For eg. when someone hovers over hyperlink of first div it should only add hover effect to fa-shield icon. Current 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 &rarr;</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 &rarr;</a>
</div>

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

@Banzay You'll need to tweak the HTML, as it's not possible to select a preceding sibling with CSS http://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-css-selector — I.G. Pascual, Jan 22 '17 at 19:48

score 1 · Answer 1 · answered Jan 20 '17 at 16:24

From this context, search in the .siblings() for the icon 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'
    });
});

score 0 · Accepted Answer · answered Jan 20 '17 at 17:23

You would have to use "this" alongside tree traversal techniques which can be found here (https://api.jquery.com/category/traversing/tree-traversal/), to specify that you are referring solely to the specific icon that is involved in the event as follows:

$(".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'
    });
});

When using .siblings you have to pass "i" as the argument as the anchor has several siblings and you need to specify exactly which you are referring to. Naturally, if you had multiple "i" elements as siblings then you could use a more specific css selector as you would know (e.g. i.fa-shield).

How to add hover effect to specific elements in different divs of same class in Jquery?

2 Answers2