文本链接悬停淡出淡入，而不是按钮DIV

http://www.w3schools.com/jquery/tryjquery_fadein.htm 文本链接悬停淡出淡入，而不是按钮DIV

1），将其更改为一个文本链接。 2）而不是点击，将其更改为悬停。 3）我想它是这样的：

文本链接1 文本链接2 文本链接3

悬停在文本链路1，将在DIV褪色1

悬停在文本链接2，将淡出DIV 1，并在DIV褪色2

悬停在文字链接3，将淡出DIV 2，并在DIV褪色3.

悬停在任何文本链接将淡出什么都日e活动div是，并且在你悬停的任何文本链接中淡入。

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
</script> 
<script> 
$(document).ready(function(){ 
    $("button").click(function(){ 
    $("#div1").fadeIn(); 
    $("#div2").fadeIn("slow"); 
    $("#div3").fadeIn(3000); 
    }); 
}); 
</script> 
</head> 

<body> 
<p>Demonstrate fadeIn() with different parameters.</p> 
<button>Click to fade in boxes</button> 
<br><br> 
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br> 
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br> 
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div> 

</body> 
</html>

来源

2014-02-10 user2343800

我刚刚添加的代码 – user2343800

你的代码与文本链接1,2,3在哪里？此代码是您从w3schools网站复制的代码。 –

是的，那就是我想改变的。我想更改为： 1）而不是按钮，将其更改为文本链接。 2）而不是单击，将其更改为悬停。 3）我想它是这样的：文本链接1个文本链接2文本链接3 悬停在文本链路1，将在DIV褪色1 悬停在文本链接2，将淡出DIV 1，和淡入div 2。将鼠标悬停在文本链接3上，将淡出div 2，淡入div 3。将鼠标悬停在任何文本链接上都会淡出活动div的内容，并淡入任何文本链接。。 – user2343800

它非常类似于发布的代码，但你必须使用.hover()功能则改变特定的div像这样。

http://jsfiddle.net/r3Dsd/2/

$(document).ready(function() { 
    $("#link1").hover(function() { 
     $("#div1").fadeIn(); 
     $("#div2").fadeOut(); 
     $("#div3").fadeOut(); 
    }); 
    $("#link2").hover(function() { 
     $("#div2").fadeIn(); 
     $("#div1").fadeOut(); 
     $("#div3").fadeOut(); 
    }); 
    $("#link3").hover(function() { 
     $("#div3").fadeIn(); 
     $("#div1").fadeOut(); 
     $("#div2").fadeOut(); 
    });

做这将是一个积极的类添加到基于相应悬停在div更好的办法。然后使用CSS3转换淡入淡出

来源

2014-02-10 23:44:35 Patrick

优秀。但它显示了所有3个盒子。如何一次只显示1个盒子。活动框需要淡出，然后另一个框淡入。 – user2343800

您可以在想要淡入淡出的其他div上添加'fadeOut（）'。如果它不是首先显示的，那么它应该显示出来 – Patrick

@ user2343800我已经更新了它的工作方式，但是在最后我提出了一个更好的方法来解决这个问题。 – Patrick

文本链接悬停淡出淡入，而不是按钮DIV

回答

相关问题