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, Mar 05 '14 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, Mar 05 '14 at 21:01

score 1 · Answer 1 · answered Mar 05 '14 at 20:57

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

mathius1 · Answer 2 · 2014-03-05T21:05:55.607

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 05 '14 at 21:05

answered Mar 05 '14 at 21:00

mathius1

1,381
11
17

May i optimise your code? : `$("td").hover(function(){ var cell = $(this).html(); $(this).toggleClass( cell=="" ? "orange" : "black"); });` – Karl-André Gagnon Mar 05 '14 at 21:04

score 0 · Answer 3 · answered Mar 05 '14 at 20:57

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

score 0 · Answer 4 · answered Mar 05 '14 at 20:58

0

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

answered Mar 05 '14 at 20:58

macsj200

149
3
12

score 0 · Answer 5 · answered Mar 05 '14 at 21:01

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

score 0 · Answer 6 · answered Mar 05 '14 at 21:01

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 */);
});

Hover on JQuery and CSS

6 Answers6