文本鏈接懸停淡出淡入，而不是按鈕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

回答

相關問題