jQuery的CSS背景變化

這是CSS，我使用這個HREF：jQuery的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懸停樣式不起作用。我怎樣才能做到這一點？

來源

2010-03-04 Sergio

您可以嘗試

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

注：我所做的黑色，使其更明顯。

發生什麼事是你點擊添加背景顏色，這個內聯優先於來自CSS的懸停顏色。 !important使CSS優先。

希望有所幫助。

（注：在Firefox中測試過）

來源

2010-03-04 12:15:32 Kamal

這是偉大的卡邁勒。謝謝！ – Sergio 2010-03-04 12:17:52

我相信這不會在IE7及以下（不知道IE8）。 – 2010-03-04 12:18:34

小心使用！非常重要 - 不需要 - 選擇依賴級聯本身的解決方案會更好，更靈活，這可能是問題所在。 – 2010-03-04 12:21:31

Demo; 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; 
}

來源

2010-03-04 12:17:11 Alex

最初，我建議使用的ID（#menu）代替一類（。菜單）。

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

祝你好運！

來源

2010-03-04 12:17:55

你可以使用這個：hover jquery。

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

來源

2011-03-21 11:06:51 Suhail

jQuery的CSS背景變化

回答

相關問題