Изменение фона jQuery CSS

Question

Это CSS, который я использую на этом href:

a.menu:link, a.menu:visited
{
    width:160px; border-bottom:1px solid #CCC; float:left;
    font-family:Tahoma, Arial, Helvetica, sans-serif;
    font-size:12px; background-color: #FFF;
    height:21px; display:block; text-decoration:none; color:#999999;
    padding:5px 0px 0px 10px
}

a.menu:hover
{
    background-color:#f2f2f2;
    font-family:Tahoma, Arial, Helvetica, sans-serif;
    font-size:12px;color:#999999
}

Код jQuery :

$(document).ready(function(){
    $(' .menu').click(function() {
        $(' .menu').css('backgroundColor','#FFF');
        $(this).css('backgroundColor','#f4f4f4');
    });
});

HTML:

<a
    href="javascript: void(0);"
    class="menu"
    id="index"
> some link</a><a
    href="javascript: void(0);"
    class="menu"
    id="index"
> link 2</a><a
    href="javascript: void(0);"
    class="menu"
    > link3</a>

Что я хочу сделать, это: Используйте стиль наведения CSS, в то время как код jQuery меняет цвет фона элемента, по которому щелкнули. В данный момент выбранный элемент меняет цвет, но стиль наведения CSS не работает. Как я могу это сделать?

Answer 1

Демо; http://jsfiddle.net/cw4TG/1/

Использование javascript: void(0); не очень хорошая практика. Также нет смысла добавлять CSS с помощью jQuery, если вы можете просто добавить / удалить класс и сохранить абстракцию презентации.

JavaScript:

$('.menu').click(function() {
    $(".menu").not($(this)).removeClass("on");
    $(this).addClass("on");
    return false;
});?

HTML:

<a href="#" class="menu" id="index"> some link</a><a href="#" class="menu" id="index"> link 2</a><a href="#" class="menu"> link3</a>?

CSS:

a.menu:link, a.menu:visited
{
    width:160px; border-bottom:1px solid #CCC; float:left;
    font-family:Tahoma, Arial, Helvetica, sans-serif;
    font-size:12px; background-color: #FFF;
    height:21px; display:block; text-decoration:none; color:#999999;
    padding:5px 0px 0px 10px
}

a.menu:hover
{
    background-color:#f2f2f2;
    font-family:Tahoma, Arial, Helvetica, sans-serif;
    font-size:12px;color:#999999
}

.on {
    background: #000 !important;
}

Answer 2

вы можете использовать это: hover jquery.

$('a').hover(function(){
    $(this).addClass('abc');
},function(){
    $(this).removeClass('abc');
});

Answer 3

Первоначально я бы рекомендовал использовать идентификатор (#menu) вместо класса (.menu).

$(function() {
   $('.menu').hover( function(){
      $(this).css('background-color', '#FFF');
   },
   function(){
      $(this).css('background-color', '#F4F4F4');
   });
});

Удачи!

Answer 4

Вы можете попробовать

a.menu:hover
{
     background-color:Black !important;
     font-family:Tahoma, Arial, Helvetica, sans-serif;
     font-size:12px;color:#999999 
}

Примечание: я сделал черный цвет, чтобы сделать его более заметным.

Что происходит, вы добавляете цвет фона по щелчку, и этот встроенный приоритет имеет приоритет над цветом при наведении, который исходит от CSS. !important делает CSS приоритетным.

Надеюсь, это поможет.

(Примечание: протестировано в Firefox.)