Question

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

1）而不是按钮，将其更改为文本链接。 2）而不是单击，将其更改为悬停。 3）我希望它是这样的：

文字链接1 文字链接2 文字链接3

将鼠标悬停在文字链接1上，将淡入div 1

将鼠标悬停在文字链接2上，淡出div 1，淡入div 2。

将鼠标悬停在文字链接3上，淡出div 2，淡入div 3。

将鼠标悬停在任何文字链接上都会淡出活动的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

它与发布的代码非常相似，但您必须使用.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过渡来淡入淡出

文本链接悬停淡出淡出div

1 个答案: