Hover on JQuery and CSS

Question

What I aim is that if when hovered, and if the cell is already active, the hovered TD will be black (for deactivation), and orange for if it's still inactive (for activation).

But with my code, every time I hover it on td, the color won't return on its previous background color. (Still orange or black even the mouse leaves) What event should I be using?

$("td").hover(function(){
    var cell = $(this).html();

    if(cell == "")
        $(this).css( "background-color", "orange");
    else
        $(this).css( "background-color", "black");
});

I think the problem is with the condition cell == "". It's better to check .length to see if there's something or not because checking == "" will not work if it's null for instance. Also, try to use .mouseover() instead of .hover() — frenchie
– frenchie, Commented Mar 5, 2014 at 20:55
The hover method is made to use the mouseenter event with the mouseleave event, this function takes 2 parameters, the in (mouse enter) and the out (mouse leave). You should change the state of your element in each of these events. — Loenix
– Loenix, Commented Mar 5, 2014 at 21:01

Ankur Aggarwal · Accepted Answer · 2014-03-05 20:57:49Z

1

Instead of checking the empty value it's better to check the length of the content

$("td").hover(function(){
    var cell = $(this).html();

    if(cell.length===0)
        $(this).css( "background-color", "orange");
    else
        $(this).css( "background-color", "black");
});

answered Mar 5, 2014 at 20:57

Ankur Aggarwal

3,0915 gold badges34 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mathius1 · Accepted Answer · 2014-03-05 21:05:55Z

1

Hover uses a handler in and handler out. 2 functions separated by comma hover()

I would use classes for the highlighting

.orange {
background: none no-repeat 0 0 orange;
}
.black{
background: none no-repeat 0 0 black;
}

Then use addClass and removeClass

$("td").hover(
    function(){
        var cell = $(this).html();
        if(cell == "") {
            $(this).addClass("orange");
        } else {
            $(this).addClass("black");
        }
    },
    function () {
            $(this).removeClass("orange").removeClass("black");
    }
});

edited Mar 5, 2014 at 21:05

answered Mar 5, 2014 at 21:00

mathius1

1,39111 silver badges18 bronze badges

1 Comment

Karl-André Gagnon Over a year ago

May i optimise your code? : $("td").hover(function(){ var cell = $(this).html(); $(this).toggleClass( cell=="" ? "orange" : "black"); });

Mark · Accepted Answer · 2014-03-05 20:57:58Z

0

Try creating and toggling a class, this will help you return to default state.

<Style>
.active {background-color:black;}
.inactive {background-color:orange;}
</style>

<script>
$("td").hover(function(){
var cell = $(this).html();

if(cell == ""){
    $(this).toggleClass("active");
}
else{
     $(this).toggleClass("inactive");
}
});

answered Mar 5, 2014 at 20:57

Mark

4,8718 gold badges58 silver badges93 bronze badges

Comments

macsj200 · Accepted Answer · 2014-03-05 20:58:08Z

0

Use mouseenter() and mouseleave() instead of hover().

answered Mar 5, 2014 at 20:58

macsj200

1493 silver badges12 bronze badges

Comments

Karl-André Gagnon · Accepted Answer · 2014-03-05 21:01:24Z

0

.hover() is a great function for toggling, but in you case, you are better by spliting the mouse leave and enter :

$('td').on({
    mouseenter : function(){
        var cell = $(this).html();

        if(cell.length===0)
            $(this).css( "background-color", "orange");
        else
            $(this).css( "background-color", "black");
    },
    mouseleave : function(){
        $(this).css('background-color', '');
    }
})

answered Mar 5, 2014 at 21:01

Karl-André Gagnon

33.9k5 gold badges53 silver badges77 bronze badges

Comments

SCB · Accepted Answer · 2014-03-05 21:01:32Z

0

What happens is when you call $(this).css( "background-color", "orange"); or similar you are changing the CSS and it'll stay that way until you ask to change it again.

When you only pass hover a single argument, it runs that same argument when you both enter, and leave, however if you pass a second argument in, then the first will be called for enter, the second for leave.

$("td").hover(function(){
    //Put original code here
}, function(){
    $(this).css( "background-color", /* Whatever the original color was */);
});

answered Mar 5, 2014 at 21:01

SCB

6,1891 gold badge36 silver badges45 bronze badges

Collectives™ on Stack Overflow

Hover on JQuery and CSS

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related