Question

this is a first question on stack overflow, so please be patient.

I have a listing of appointments set out in rows with alternating background colors for readability determined by the class grey.

    <div class="grid_13 alpha omega entry grey">
    <div class="grid_3 alpha start">Sat 05/05/2012 10:00 am</div>
    <div class="grid_3">Sat 05/05/2012 10:15 am</div>
    <div class="grid_3">ME</div>
    <div class="grid_3 omega">Attended</div>
</div>
<div class="grid_13 alpha omega entry">
    <div class="grid_3 alpha start">Tue 01/05/2012 9:00 am</div>
    <div class="grid_3">Tue 01/05/2012 10:00 am</div>
    <div class="grid_3">MDH</div>
    <div class="grid_3 omega">Scheduled</div>
</div>
<div class="grid_13 alpha omega entry grey">
    <div class="grid_3 alpha start">Mon 30/04/2012 8:45 am</div>
    <div class="grid_3">Mon 30/04/2012 9:45 am</div>
    <div class="grid_3">ME</div>
    <div class="grid_3 omega">Scheduled</div>
</div>
<div class="grid_13 alpha omega entry">
    <div class="grid_3 alpha start">Thu 26/04/2012 11:00 am</div>
    <div class="grid_3">Thu 26/04/2012 12:00 pm</div>
    <div class="grid_3">ME</div>
    <div class="grid_3 omega">Scheduled</div>
</div>

On mouseover I am trying to remove the class grey, which I am able to do, and then add another background color as a highlight, then remove it on mouseout which I can also manage.

        $(".entry").mouseover(function(){
        $(this).removeClass("grey");
        $(this).addClass("highlight");
    });
    $(".entry").mouseout(function(){
        $(this).removeClass("highlight");
    });

However I can’t work out how to reinstate the class grey, but only if it had the class grey in the first place. I have tried

    if ($(".entry").attr('class') == "grey") {
            $(this).hover(
            function(){ $(this).removeClass("grey"); $(this).addClass("highlight"); },
            function(){ $(this).removeClass("highlight"); $(this).addClass("grey"); }
        )
    } else{
        $(this).hover(
            function(){ $(this).addClass("highlight"); },
            function(){ $(this).removeClass("highlight"); } 
        )
    };

plus some other combinations, none of which seem to work.

Answer 1

Like I said in my comment, add a class called for example canhavegray on every element that has the class gray. Then this function should work:

$('.entry').mouseover(function(){
    $(this).removeClass('grey'); // Will only happen if the element has the class gray
    $(this).addClass('highlight');
})
$('.entry').mouseout(function(){
    if ($(this).hasClass('canhavegray')) // If the element has this class, it will readd it here
        $(this).addClass('grey');
    $(this).removeClass('highlight');
});