如何使用jQuery重置顏色後恢復懸停？

我有這個小小的jQuery代碼工作，但有一件事我無法弄清楚。點擊我的infocontent菜單後，h1：hover就消失了。我如何獲得懸停功能？如何使用jQuery重置顏色後恢復懸停？

HTML：

<div class="infocontent"><h1>Wat?</h1></div> 
<div class="infocontent"><h1>Van/ voor wie?</h1></div> 
<div class="infocontent"><h1>Akties</h1></div> 
<div class="infocontent"><h1>Met wie?</h1></div>

CSS：

.infocontent { 
    width: 120px; 
    height: 120; 
    float: left; 
} 

.infocontent h1 { 
    width: 100%; 
    font-size: 24px; 
    text-transform: uppercase; 
    color: #999; 
} 

.infocontent h1:hover { color: #000; }

的jQuery：

$('.infocontent h1:first').css('color', '#000'); 

$(".infocontent h1").on("click", function() { 
    $('.infocontent h1').css('color', '#999'); 
    $(this).css('color', '#000'); 
});

Demo

來源

2013-10-22 Pascal Gerritsen

可能會更容易改變JS更改類的東西，如：

$('.infocontent h1').eq(0).addClass('on').end().on("click", function() { 
    if(!$(this).hasClass('on')) { 
     $('.on').removeClass('on'); 
     $(this).addClass('on'); 
    } 
});

並更改CSS來這樣的事情

編輯：看到你想要的背景變化

.infocontent{float: left} 

.infocontent h1 { 
    text-transform: uppercase; 
    color: #999999; 
    /* opt changes */ 
    font-size: 18px; 
    padding:3px 8px; 
    letter-spacing:2px; 
    cursor:pointer/*so users know to click it*/ 
} 

.infocontent h1.on,.infocontent h1.on:hover{color:#000000;background-color:#CCCCCC} 
.infocontent h1:hover {color:#666666;background-color:#EDEDED}

我更新了你的小提琴（現在帶有bg變化）：http://jsfiddle.net/filever10/FXetb/18/

來源

2013-10-22 23:48:13 FiLeVeR10

工程就像一個魅力:) –

我更新了鏈接添加背景顏色支持，以及看到你的評論。做了一些可選的更改，似乎更有趣。 – FiLeVeR10

謝謝，但我會堅持我的原始代碼的背景，儘管你的版本有更少的代碼，'因爲我昨天開始使用jQuery，這將花費我一些時間來調整你的代碼，我想要的東西改變的方式： P 這是我使用它的網站[鏈接]（http://payitforwardarnhem.nl/index4.php）： –

由於jQuery是將內聯CSS，只有這樣，才能覆蓋這 - 遺憾的是 - 是通過!important

更新CSS

.infocontent h1:hover { 
    color: #000!important; 
}

jsFiddle - it works.

我建議完全避免的!important使用。您可以通過更改jQuery來添加/刪除CSS類而不是添加內聯樣式。

來源

2013-10-22 23:27:24

太糟糕了，當添加重要內容時，infocontent div的背景着色不起作用。我可以通過使用[.on（「hover」func]或[.hover（）]來解決這個問題，不需要css：懸停嗎？ –

@PascalGerritsen你是什麼意思，它不工作..它在這裏工作http：///jsfiddle.net/4y4W6/ –

h1：hover正在工作;）但是我有一個非常類似的腳本來改變h1-parent的背景顏色，並且在！ –

如何使用jQuery重置顏色後恢復懸停？

回答

相關問題