CSS懸停和jQuery CSS的

懸停效果jQuery的動作後不執行了：CSS懸停和jQuery CSS的

我有下面的CSS：

#slider-information-content{ 
    display: inline; 
    visibility: hidden; 
} 
#slider-information:hover #slider-information-content { 
    display: inline; 
    visibility: visible; 
}

和下面的jQuery代碼：

$("#slider-information-content-close").click(function(e) { 
    $("#slider-information-content").css("visibility", "hidden"); 
    e.preventDefault(); 
    return false; 
});

懸停效果工作正常。我也可以用jquery隱藏div。但是，當我用jquery隱藏div時，懸停效果不再有效，div不會出現。我該如何改變它？還有爲什麼？

JS Fiddle

來源

2014-07-01 craphunter

可以添加一個http://jsfiddle.net展示您的樣品？ – STW

我將鼠標懸停在＃slider-information：hover上以顯示div＃slider-information-content。 – craphunter

它與dwreck08的小提琴http://jsfiddle.net/mcH7L/1/（我做了一個小小的更改，以移動內容中的關閉按鈕）相似嗎？ – STW

您的代碼存在的問題是，設置了內聯樣式的visibility property通過jQuery設置優先。

您可以使用jQuery .hover()爲此，

$("#slider-information").hover(function (e) { 

    $("#slider-information-content").css("visibility", "visible"); 

}, function (e) { 

    $("#slider-information-content").css("visibility", "hidden"); 

});

Demo

來源

2014-07-01 16:34:12

在JavaScript（或jQuery的）的元素上設置CSS應用價值元素的style="..."屬性。

這比樣式表中的任何規則具有更高的優先級。在這種情況下，您有0210作爲您的visibility: visible的優先順序，但.css("visibility","hidden")的優先順序爲1000，因此獲勝。

您可以通過使用繞過這個：

#slider-information:hover #slider-information-content { 
    visibility: visible !important; 
}

然而，使用!important幾乎總是意味着你正在做的事情錯誤。

來源

2014-07-01 16:28:03

你混合jQuery和CSS，這可能會非常棘手。如果您切換到使用jQuery進行懸停和點擊行爲，將會簡化代碼並修復問題。

http://jsfiddle.net/mcH7L/2/

CSS

#slider-information-content { 
    display: inline; 
    visibility: hidden; 
} 
#slider-information:hover #slider-information-content { 
    display: inline; 
    visibility: visible; 
}

HTML

<div id="slider-information">Hover this 
    <div id="slider-information-content"> 
     <div id="slider-information-content-close">Close</div> 
     Hidden content here</div> 
</div>

jQuery的

$("#slider-information").hover(function (e) { 
    $("#slider-information-content").show(); 
}, function (e) { 
    $("#slider-information-content").hide(); 
}); 

$("#slider-information-content-close").click(function (e) { 
    $("#slider-information-content").hide() 
    e.preventDefault(); 
    return false; 
});

來源

2014-07-01 16:38:19 STW

CSS懸停和jQuery CSS的

回答

相關問題