0

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.

4

3 に答える 3

1 
$('.parentElementClass').on('mouseover mouseout', '.entry', function() {
    $(this).toggleClass('grey highlight');
});

デモ

トグルクラスについて確認する

于 2012-08-25T00:07:47.513 に答える
0

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');
});
于 2012-08-25T00:05:20.243 に答える
0

Maybe even something like this would work:

$('div.entry:even').hover(function(){$(this).toggleClass('highlight');});

DEMO HERE

:even Selector

于 2012-08-25T00:30:55.287 に答える