Change background on hover and remove it on hover (with a color change on click complication)

Question

I've been experimenting with two different ways of highlight a set (class) of span tags on hover (from here this thread: 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) suppose to be better

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

Both of those work fine. My problem is that while the hover is highlighting the items in yellow, on-click I'm setting the background to green (to indicate which level of pagination items per page is being used). Of course when the hover state ends, both scripts are reverting back to the original state before the hover so my green background color (to indicated the selected pagination level) is being replaced by what the background was before the hover event started.

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

Is it possible to modify either script to restore a different color than the original if a click has occured? I'm not that great with Javascript but could the pagination_per_page function change the variable contents of the 2nd .over function from above so the mouse-out color restore will just change it to the green the pagination_per_page function is setting the span to onclick()?

Thanks - much apprecaited!

Answer 1

Use classes instead of manipulating the background color directly, then you can add !important to the clicked background color. For example, HTML:

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

CSS:

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

And the jQuery:

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

And the Ob-fiddle: http://jsfiddle.net/ambiguous/LLR6b/1/

The idea is to toggle the hovering class on and off during hover events but add a class that always overrides everything else when clicked.

Answer 2

you can use unbind

DEMO