jquery - 悬停时更改背景并在悬停时将其删除(单击复杂功能时颜色更改)

Question

我一直在尝试两种不同的方法来突出显示悬停时的一组(类)跨度标签(从这里开始此线程:Change background color on mouseover and remove it after mouseout):

1)

<script type="text/javascript">
$(document).ready(function() {
    $('.pagination_per_page').bind("mouseover", function(){
        var color = $(this).css("background-color");
        $(this).css("background", '#FFFF00');
        $(this).bind("mouseout", function(){
        $(this).css("background", color);
        })
    })
})
</script>

2)应该更好

<script type="text/javascript">
    $(document).ready(function() {
        $('.pagination_per_page').hover(
            function(){
                var $this = $j(this);
                $this.data('bgcolor', $this.css('background-color')).css('background-color', '#FFFF00');
            },
            function(){
                var $this = $j(this);
                $this.css('background-color', $this.data('bgcolor'));
            }
        );
    })
</script>

这两个都工作得很好。我的问题是，虽然悬停以黄色突出显示元素，但单击时我将背景设置为绿色(以指示每页正在使用哪个级别的分页元素)。当然，当悬停状态结束时，两个脚本都会恢复到悬停之前的原始状态，因此我的绿色背景颜色(指示所选的分页级别)将被悬停事件开始之前的背景替换。

<span id="pagination_per_page_10" class="pagination_per_page" onClick="pagination_per_page('10');" style="cursor:pointer;">&nbsp;10&nbsp;</span>&nbsp;
<span id="pagination_per_page_20" class="pagination_per_page" onClick="pagination_per_page('20');" style="cursor:pointer;">&nbsp;20&nbsp;</span>&nbsp;
<span id="pagination_per_page_30" class="pagination_per_page" onClick="pagination_per_page('30');" style="cursor:pointer;">&nbsp;30&nbsp;</span>&nbsp;
<span id="pagination_per_page_40" class="pagination_per_page" onClick="pagination_per_page('40');" style="cursor:pointer;">&nbsp;40&nbsp;</span>&nbsp;
<span id="pagination_per_page_50" class="pagination_per_page" onClick="pagination_per_page('50');" style="cursor:pointer;">&nbsp;50&nbsp;</span>&nbsp;
<span id="pagination_per_page_75" class="pagination_per_page" onClick="pagination_per_page('75');" style="cursor:pointer;">&nbsp;75&nbsp;</span>&nbsp;
<span id="pagination_per_page_100" class="pagination_per_page" onClick="pagination_per_page('100');" style="cursor:pointer;">&nbsp;100&nbsp;</span>&nbsp;
<span id="pagination_per_page_ALL" class="pagination_per_page" onClick="pagination_per_page('ALL');" style="cursor:pointer;">&nbsp;ALL&nbsp;</span>&nbsp;

<script type="text/javascript">
    pagination_per_page = function(e) {
    $j('#pagination_per_page_' + e).css("background-color", '#00FF00');

    // set a cookie with the user desired pagination items per page
    // call some ajax to reload the list
    // etc.
    }
</script>

如果发生点击，是否可以修改任一脚本以恢复与原始颜色不同的颜色？我对Javascript不太擅长，但是 pagination_per_page 函数可以更改上面第二个 .over 函数的变量内容，这样鼠标移开颜色恢复只会将其更改为绿色 pagination_per_page 函数将跨度设置为 onclick() ？

谢谢 - 非常感谢!

Answer 1

使用类而不是直接操作背景颜色，那么您可以将 !important 添加到单击的背景颜色中。例如，HTML:

<span>where is</span>
<br/>
<span>pancake</span>
<br/>
<span>house</span>

CSS:

.hovered {
    background: #0f0;
}
.clicked {
    color: #fff;
    background: #00f !important;
}

还有 jQuery:

$('span').hover(function() {
    $(this).toggleClass('hovered');
});
$('span').click(function() {
    $(this).addClass('clicked');
});

还有 Ob-fiddle:http://jsfiddle.net/ambiguous/LLR6b/1/

这个想法是在悬停事件期间打开和关闭悬停类，但添加一个在单击时始终覆盖其他所有内容的类。