文本链接悬停淡出淡入淡入div

Question

http://www.w3schools.com/jquery/tryjquery_fadein.htm http://www.w3schools.com/jquery/tryjquery_fadein.htm

1) instead of button, change it to a text link. 1）代替按钮，将其更改为文本链接。 2) instead of on click, change it to on hover. 2）代替单击，而是将其更改为悬停。 3) i would like it to be like this: 3）我希望这样：

text link 1 text link 2 text link 3 文字链接1文字链接2文字链接3

hover over text link 1, will fade in div 1 将鼠标悬停在文本链接1上，将在div 1中消失

hover over text link 2, will fade out div 1, and fade in div 2. 将鼠标悬停在文本链接2上，将淡出div 1，并淡入div 2。

hover over text link 3, will fade out div 2, and fade in div 3. 将鼠标悬停在文本链接3上，将淡出div 2，并淡入div 3。

hover over any text link will fade out what ever the active div is, and fade in whatever text link you hover. 将鼠标悬停在任何文本链接上将淡出活动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>

Answer 1

It's very similar to the the code posted, but you have to use the .hover() function then change the specific div like so. 它与发布的代码非常相似，但是您必须使用.hover()函数，然后像这样更改特定的div。

http://jsfiddle.net/r3Dsd/2/ 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();
    });

A better way of doing it would be to add an active class to the div based on the corresponding hover. 更好的方法是根据相应的悬停为div添加一个活动类。 Then use CSS3 transitions to fade them in and out 然后使用CSS3过渡淡入淡出

文本链接悬停淡出淡入淡入div

问题描述

1 个解决方案

解决方案1
0 2014-02-10 23:44:35

文本链接悬停淡出淡入淡入div

问题描述

1 个解决方案

解决方案1 0 2014-02-10 23:44:35

解决方案1
0 2014-02-10 23:44:35