jQuery UI - 問題與addClass/removeClass：不需要的白色背景

我試圖設置使用jqueryUI的addClass（）和removeClass（）的懸停效果。
這就是我想出的：http://jsfiddle.net/5aS77/。
正如您所看到的，'onmouseout'，背景一段時間變成白色，然後'跳轉'爲藍色。
我只想讓動畫從藍色變成粉紅色，反之亦然，沒有任何「中斷」。jQuery UI - 問題與addClass/removeClass：不需要的白色背景

我知道CSS3是可能的，我已經嘗試過它，雖然它有兩個主要的缺點：
1）並非所有的瀏覽器都支持transition屬性。
2）它沒有一個onmouseout效果。（儘管它可以與一些JS來實現。）

來源

2012-06-14 Asaf

我同意，並非所有瀏覽器都支持CSS3轉換，但是您可以應用（不同）轉換來進入和離開元素，例如http://css-tricks.com/different-transitions-for-hover-on-懸停/ – andyb

的白色閃光是因爲jQuery不具有基本顏色從作爲背景色被設定在.nav類而不是<a>元素製作動畫。

您可以按如下方式編輯規則以刪除白色閃光燈。

.nav a { 
    background-color:blue; 
    ... 
} 

.nav .a_hover { // <--- need the .nav here otherwise CSS specificity results in blue still winning 
    ... 
}

另外，如果你想，這裏是一個稍微乾淨實施的jQuery：

$('a').on({ 
    mouseenter:function() { 
     $(this).stop().animate({backgroundColor:'#f89ed5'}, 250); 
    }, 
    mouseleave:function() { 
     $(this).stop().animate({backgroundColor:'blue'}, 250); 
    } 
});

這樣，.a_hover類可以被刪除，但你仍然需要background-color:blue上.nav a規則避免最初的白色閃光。 .a_hover中的其他屬性不需要，因爲它們已經在.nav a規則中退出。

來源

2012-06-14 11:08:45 andyb

DEMO：Jsfiddle

var links = document.getElementsByTagName("a"); 
    for(var i = 0; i < links.length; i++) { 
     links[i].onmouseover = hoverHandler; 
     links[i].onmouseout = outHandler; 
    } 

    function hoverHandler() { 
     $(this).addClass("a_hover",250); 
    } 

    function outHandler() { 
     $(this).removeClass("a_hover"); 
    }

來源

2012-06-14 10:39:30 Rab

謝謝，雖然它不能解決問題。在addClass（）中仍然有白色背景顯示，另外，我正在尋找removeClass效果，因此它不能很好地完成這項工作。仍然感謝您的嘗試！ – Asaf

你是什麼瀏覽器，我看不到一個空白區域 – Rab

從removeClass中刪除使用Opera和Firefox的時間間隔 –

如果你在jQuery的文檔，你會看到有一個懸停事件看 - 如果你打算使用jquery值得充分利用它。（http://api.jquery.com/hover/）。

說，你可以實現無JS同樣的事情：

.nav a { 
    display:block; 
    float:left; 
    text-decoration:none; 
    text-shadow:1px 1px #FFF; 
    height:31px; 
    width:auto; 
    color: #000; 
    padding: 11px 20px 0 20px; 
    overflow:hidden; 
} 
.nav a:hover{ 
    display:block; 
    overflow:hidden; 
    background-color:#f89ed5; 
    text-shadow:1px 1px #FFF; 
    padding: 11px 20px 0 20px; 
}

回答這個問題：

刪除號碼如

function hoverHandler() { 
       $(this).addClass("a_hover"); 
      } 

      function outHandler() { 
       $(this).removeClass("a_hover"); 
      }

http://api.jquery.com/addClass/

來源

2012-06-14 10:48:54 matpol

我知道它可以用js來實現。雖然我想淡入/淡出那種動畫... – Asaf

沒有*對不起！ – Asaf

jQuery UI - 問題與addClass/removeClass：不需要的白色背景

回答

相關問題