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

回答

相关问题