Question

我一直在尝试使用两种不同的方法在悬停时突出显示一组（类）span标记（从这里开始：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函数将span设置为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');
});

和小提琴：http://jsfiddle.net/ambiguous/LLR6b/1/

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

Answer 2

您可以使用unbind

DEMO

在悬停时更改背景并在悬停时将其删除（在单击复杂化时使用颜色更改）

2 个答案: