CODEWITHSUNDEEP
javascripthtmlcsshover
newbie_007
newbie_007

Reputation: 59

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

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

Upvotes: 1

Views: 847

Answers (2)

sahil-sethi
sahil-sethi

Reputation: 122

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).

Upvotes: 0

I.G. Pascual
I.G. Pascual

Reputation: 5965

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

Upvotes: 1

Related Questions