Question

这是我在这个href上使用的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
}

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);不是很好的做法。如果您只需添加/删除一个类并保持抽象的表示，那么使用jQuery添加CSS也没有意义。

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

你可以尝试

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

注意：我将颜色设为黑色以使其更加明显。

正在发生的是您在点击时添加背景颜色，此内联优先于来自CSS的悬停颜色。 !important使CSS优先。

希望有所帮助。

（注意：在Firefox中测试过。）

Answer 3

最初，我建议使用ID（#menu）而不是Class（.menu）。

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

祝你好运！

Answer 4

你可以使用它：hover jquery。

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

jQuery CSS后台更改

4 个答案: