CODEWITHSUNDEEP
jquery
Robbie Fikes
Robbie Fikes

Reputation: 409

How to run a function automatically for a classes using $(this)?

I currently have a function that runs on mouse enter. On '.tip-icon' mouseenter I have a css change happening. But there are 3 different '.tip-icon'. And the property change only happens when you hover over each one. How do I set this css change for each individual one automatically so I don't need to mouse over each one to fix it?

Each '.tip-icon' has a different height, that's why I use $(this). So in the end the 3 different '.tip-icon' will have their own unique css change.

$('.tip-icon').mouseenter(function(){
    var toolHeight = $(this).siblings('.tip-group').children('.tip-message').height();
    $(this).css('top', (toolHeight/2)-6);

Upvotes: 0

Views: 21

Answers (2)

PeterKA
PeterKA

Reputation: 24638

Use this:

$(function() {

    $('.tip-icon').css('top', function(){
        var toolHeight = $(this).siblings('.tip-group').children('.tip-message').height();
        return (toolHeight/2)-6;
    });

});

Upvotes: 1

Robbie Fikes
Robbie Fikes

Reputation: 409

Just had to change .mouseenter to .each

$('.tip-icon').each(function(){
    var toolHeight = $(this).siblings('.tip-group').children('.tip-message').height();
    $(this).css('top', (toolHeight/2)-6);
});

Upvotes: 0

Related Questions