jQuery css（）函數更改'a'屬性而不是'a：hover'屬性

Question

目前，我在使用jQuery css()函數時遇到了一些麻煩。 懸停時，它將更改錨元素的border-top-color的css值，而不僅僅是錨元素的border-top-color 。 下面是我的代碼。

$("#header #headerlist li a:hover").css("border-top-color","rgb(225, 149, 79)");

為什么要更改#header #headerlist li a邊框顏色和#header #headerlist li a:hover屬性，而不僅僅是#header #headerlist li a:hover屬性？

Answer 1

您的示例不起作用的原因是因為選擇器無法檢測到：hover，因為那是純CSS的事情。 相反，您可以嘗試使用實際的jquery懸停方法 ：

$("#header #headerlist li a").hover(
  function () {
    $(this).css("border-top-color", "#FF0000");
  }, 
  function () {
    $(this).css("border-top-color", "#000000");
  }
);

另外，您也可以使用addclass方法：

$("#header #headerlist li a").hover(
  function () {
    $(this).addClass('hover-highlight');
  }, 
  function () {
    $(this).removeClass('hover-highlight');
  }
);

這可以進一步簡化為：

$("#header #headerlist li a").hover(function () {
    $(this).toggleClass('hover-highlight');
});

Answer 2

我不知道為什么，但是這種更改最好在CSS中完成，所以我建議，如果您確實需要通過JS進行更改，請創建一個CSS類，然后在JS中進行更改。

的CSS

#header #headerlist li a.fancy-border:hover{
  border-top-color: rgb(225, 149, 79);
}

JS

$("#header #headerlist li a").addClass("fancy-border");

這樣，您可以更好地將功能與演示分開。

Answer 3

它不起作用的原因是因為:hover位實際上沒有為選擇器提供有關元素的任何信息。

a:hover在CSS比賽上完全相同的元素a ，它只是定義當用戶將鼠標懸停在這些元素為一組不同的屬性。

jQuery選擇器旨在查找（選擇）元素，而不是設置其樣式。

在css()方法簡單地設置在被選擇，它不會添加或更改任何實際的CSS聲明元素的內嵌樣式。

正如其他人提到的那樣，您可以使用hover()事件來獲得相同的行為。 雖然，如另一位回答者所述，即時添加一個類可能更好。

但是，如果您不需要即時更改它，我建議使用普通的舊CSS，因為它速度更快並且不需要用戶啟用JavaScript。

Answer 4

此代碼自1.9起被破壞

if($('...').is(':hover')){
  $(this).css('set','your styles here')
}

用這個代替

var class = '...';
if($(class+':hover').length>0){
  $(class).css('set','your styles here');
}

Answer 5

將！important添加到懸停CSS以避免樣式被覆蓋。 例如：

 test:hover { border: 1.5px solid white !important; color: white !important; }