CODEWITHSUNDEEP
jqueryif-statementhovermouseeventmouseover
Shawn
Shawn

Reputation: 185

jQuery Beginner Hovers, with if statements

Right now, I have this code that works:

$( "a.tw" ).hover(function() {
$( "a.st" ).css("background-image", "url(stw.png)");  
});

$( "a.tu" ).hover(function() {
$( "a.st" ).css("background-image", "url(stu.png)");  
});

$( "a.in" ).hover(function() {
$( "a.st" ).css("background-image", "url(sin.png)");  
});

However, what I really want to do is have "if" statements for all of them. If I hover over one of the above classes, I want the BG will change.

Could someone point me in the right direction please?

Upvotes: 0

Views: 123

Answers (3)

user1587985
user1587985

Reputation: 685

You can also use live() function, so it works on DOM

$('a').live('hover', function() {
    if($(this).hasClass('tw'))
    {
        // Applay bg
    }
});

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

Try

$("a.tw,a.tu,a.in").hover(function () {
    var $a = $(this)
    $("a.st").css("background-image", function () {
        if ($a.hasClass('tw')) {
            return "url(stw.png)";
        }
        if ($a.hasClass('tu')) {
            return "url(stu.png)";
        }
        if ($a.hasClass('in')) {
            return "url(sin.png)";
        }
    });
});

Upvotes: 1

gskema
gskema

Reputation: 3211

Easier way is to make your background into a class if possible :

$('a.tw').hover(function() {
   $('a.st').toggleClass('background-stw');  
});

CSS

.background-stw
{
   background-image : url('stw.png');
}

Upvotes: 2

Related Questions