0

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

为了便于阅读，我有一个按行列出的约会列表，背景颜色由灰色类决定。

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

加上其他一些组合，似乎都不起作用。

4

3 回答 3

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

演示

检查toggleClass

于 2012-08-25T00:07:47.513 回答
0

就像我在评论中所说的那样，canhavegray在每个具有 class 的元素上添加一个名为 example 的类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');
});
于 2012-08-25T00:05:20.243 回答
0

也许甚至像这样的东西也会起作用：

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

在这里演示

:even 选择器

于 2012-08-25T00:30:55.287 回答