CSS懸停褪色

我有一個簡單的鏈接，當用戶將鼠標懸停改變，沿着這些線路等等的東西：CSS懸停褪色

a.mylink { 
    background: url(..) top left no-repeat; 
    width: 100px; height: 100px; 
} 

a.mylink:hover, 
a.mylink.jqHover { 
    background: url(..) top left no-repeat; 
    color: red; 
}

改變了主意什麼，我希望發生的，基本上我想打這樣，當用戶懸停鏈接時，它會執行：懸停的東西，但慢慢地而不是立即。所以就像一個過渡效果。我已經把它變成了一個類，以便更容易地處理懸停malarkey，所以我猜測一個簡單的添加類和刪除類，但有一些淡入淡出定時器？

我有效地試圖做到這一點：

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

但我想它的兩個類之間不褪色！

///////////////////////編輯：

這是代碼我在此刻 - >

$("ul.BrightLozenges li a").hover(

     function() { 
      $(this).switchClass('Normal','Special',200,'easeOutBounce'); 
     }, 
     function() {  
      $(this).switchClass('Special','Normal',200,'easeOutBounce'); 
     });

哪個工作正常，但我想讓它淡入淡出，嘗試使用「淡入淡出」作爲過渡，但它不起作用？

來源

2010-07-06 Cameron

你不能褪色的背景，除非它是一個DOM元素... – Reigel 2010-07-06 09:19:01

然後我該怎麼做呢？ – Cameron 2010-07-06 09:20:59

檢查您需要使用切換功能的更新答案 – 2010-07-06 10:18:53

使用：.hover()

以下例子也由我貼的鏈接頁面上availble的。

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
    ul { margin-left:20px; color:blue; } 
    li { cursor:default; } 
    span { color:red; } 
</style> 
    <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
</head> 
<body> 
<ul> 
    <li>Milk</li> 
    <li>Bread</li> 
    <li class='fade'>Chips</li> 

    <li class='fade'>Socks</li> 
    </ul> 
<script> 
$("li").hover(
    function() { 
    $(this).append($("<span> ***</span>")); 
    }, 
    function() { 
    $(this).find("span:last").remove(); 
    } 
); 



//li with fade class 
$("li.fade").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);}); 

</script> 
</body> 
</html>

編輯：

使用toggle如用於以下功能將做的工作對你

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
p { background:#dad; 
font-weight:bold; 
font-size:16px; } 
</style> 
    <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
</head> 
<body> 
<button>Toggle 'em</button> 

<p>Hiya</p> 
<p>Such interesting text, eh?</p> 
<script> 
$("button").click(function() { 
$("p").toggle("slow"); 
});  
</script> 
</body> 
</html>

來源

2010-07-06 09:18:08

您可以創建一個精靈的圖像和動畫它的後臺位置，如果這符合你的需要。

看一看這個帖子http://snook.ca/archives/javascript/jquery-bg-image-animations/

除此之外，你要淡出整個元素，增加一類新的BG，並在元素褪色。如果發生這種情況的速度非常快（即200/300ms），那麼過渡應該是相當不錯的。

你可以嘗試這樣的事情：

$(document).ready(function() { 
    $(".mylink").hover(function() { 
     $(this).fadeOut(200).addClass("jqHover").fadeIn(300); 
    }, 
     $(this).fadeOut(200).removeClass("jqHover").fadeIn(300); 
    ); 
}

來源

2010-07-06 09:54:49 Marko

使用switchClass方法jQuery UI。

$(elem).switchClass('currentClass', 'newClass', 500);

來源

2010-07-06 15:50:23 melhosseiny

這是迄今爲止最好的，但它不會切換回我的默認狀態！是否有可能修改代碼，以便用戶將其淡入淡出階段，然後在空閒時回到其他階層。謝謝。 – Cameron 2010-07-07 09:22:16

我已經將我現在的代碼添加到我的Q – Cameron 2010-07-07 09:34:51

我可以看到兩個類Normal和Special的CSS嗎？ – melhosseiny 2010-07-07 12:26:26

回答

相關問題