Question

这是关于堆栈溢出的第一个问题，所以请耐心等待。

我有一个约会列表，这些约会以交替的背景颜色排列，以便于灰色等级确定的可读性。

    <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>

在鼠标悬停时，我试图删除我能够做的灰色类，然后添加另一个背景颜色作为高亮，然后在mouseout上删除它，我也可以管理。

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

但是我无法弄清楚如何恢复灰色类，但前提是它的类是灰色的。我试过了

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

加上其他一些组合，但似乎都没有。

Answer 1

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

demo

查看toggleClass

Answer 2

就像我在评论中所说，在每个具有类canhavegray的元素上添加一个名为gray的类。然后这个功能应该起作用：

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

Answer 3

也许这样的事情会起作用：

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

DEMO HERE

:even Selector

使用jquery在mouseout上恢复类

3 个答案: