fadein css更改懸停

有4個divs。所有的都有背景圖片，當你將鼠標懸停在div1上時，腳本應該改變div 2,3,4中的背景圖片。這應該是動畫的（淡入淡出？）。fadein css更改懸停

這是幾個小時的jquery「邊幹邊學」後得到的代碼，但我無法讓jquery動畫。

HTML：

<div class="categories" style="color:#ccc;"> 
      <div class="single_cat first"></div> 
      <div class="single_cat second"></div> 
      <div class="single_cat third"></div> 
      <div class="single_cat fourth"></div> 
     </div>

CSS：

#tour .categories{ 
    width: 950px; 
    height: 236px; 
    background-color: #efefef; 
    margin: 20px 0 0 0; 
} 

.single_cat { 
    width: 236px; 
    height: inherit; 
    margin: 0 2px 0 0; 
    float: left; 
    background-color: #222; 
    color: #fff; 
} 

.single_cat.fourth { 
    width: 236px; 
    height: inherit; 
    margin: 0; 
    float: left; 
    background-color: #222; 
} 

.single_cat.first { 
    background-image:url('/img/takethetour/r_text.png'); 
} 

.single_cat.second { 
    background-image:url('/img/takethetour/b_text.png'); 
} 

.single_cat.third { 
    background-image:url('/img/takethetour/c_text.png'); 
} 

.single_cat.fourth { 
    background-image:url('/img/takethetour/bou_text.png'); 
}

的jquery（JAVA）：

$(".first").mouseover(function() { 
    $(".second").css('background', 'url(/img/takethetour/r_2.png)'); 
    $(".third").css('background', 'url(/img/takethetour/r_3.png)'); 
    $(".fourth").css('background', 'url(/img/takethetour/r_4.png)'); 
    }).mouseout(function(){ 
    $(".second").css('background', 'url(/img/takethetour/b_text.png)'); 
    $(".third").css('background', 'url(/img/takethetour/c_text.png)'); 
    $(".fourth").css('background', 'url(/img/takethetour/bou_text.png)'); 
    }); 
    $(".second").mouseover(function() { 
     $(".first").css('background', 'url(/img/takethetour/b_2.png)'); 
     $(".third").css('background', 'url(/img/takethetour/b_3.png)'); 
     $(".fourth").css('background', 'url(/img/takethetour/b_4.png)'); 
    }).mouseout(function(){ 
     $(".first").css('background', 'url(/img/takethetour/r_text.png)'); 
     $(".third").css('background', 'url(/img/takethetour/c_text.png)'); 
     $(".fourth").css('background', 'url(/img/takethetour/bou_text.png)'); 
    }); 
    $(".third").mouseover(function() { 
     $(".first").css('background', 'url(/img/takethetour/c_2.png)'); 
     $(".second").css('background', 'url(/img/takethetour/c_3.png)'); 
     $(".fourth").css('background', 'url(/img/takethetour/c_4.png)'); 
     }).mouseout(function(){ 
     $(".first").css('background', 'url(/img/takethetour/r_text.png)'); 
     $(".second").css('background', 'url(/img/takethetour/b_text.png)'); 
     $(".fourth").css('background', 'url(/img/takethetour/bou_text.png)'); 
     }); 
     $(".fourth").mouseover(function() { 
      $(".first").css('background', 'url(/img/takethetour/bou_2.png)'); 
      $(".third").css('background', 'url(/img/takethetour/bou_3.png)'); 
      $(".second").css('background', 'url(/img/takethetour/bou_4.png)'); 
     }).mouseout(function(){ 
      $(".first").css('background', 'url(/img/takethetour/r_text.png)'); 
      $(".third").css('background', 'url(/img/takethetour/c_text.png)'); 
      $(".second").css('background', 'url(/img/takethetour/b_text.png)'); 
     });

來源

2012-01-21 Fabian Schleicher

背景圖像不能進行動畫處理。只有顏色或其他標量值可以動畫。

來源

2012-01-21 21:53:32 TimWolla

感謝這個信息我不知道！ –

如果你正在尋找非盤旋的div淡出第一，然後漸退在新的背景，你需要這樣的事：

$(".first").mouseover(function() { 
    $(".second").fadeOut('slow',function(){ 
     $(this).css('background', 'url(/img/takethetour/r_2.png)').fadeIn('slow'); 
    });

來源

2012-01-21 21:56:07 skybondsor

完美的解決方案完美的工作！這就是我想要的，謝謝你的回覆！對於遲到的回覆 –

沒問題！選擇它作爲你有機會的答案。 – skybondsor

如果你需要的背景圖片要直接從一個到另一個淡入淡出，您可以嘗試在另一個內嵌入一個div作爲背景。將內部div的背景設置爲默認背景，將外部div的背景設置爲懸停背景。然後，你可以淡入淡出內部div。

請記住，您不會希望在內部背景div中放置任何內容，因爲它會淡出（除非這是您想要的） - 您需要另一個兄弟div來包含內容。這可能需要一點CSS才能正確定位所有內容，具體取決於您如何佈置網頁。

這是其中一個人的基本想法，但請記住，您可能需要處理div的位置和大小，以便它們正確重疊。

<div class="div1outer">   <!-- has one background --> 
    <div class="div1bg"></div>  <!-- has the other background --> 
    <div class="div1content"></div> <!-- has the content --> 
</div>

來源

2012-01-21 22:04:14 TLUL

你好，謝謝你的幫助。出於某種原因，我沒有設法實現這個想法，但skybondsor的一角工作。 –

另一種方法可能是讓他們成爲IMG公司和較低的z-index他們的風格，以層在他們身後的其他內容。這可以創造出與「背景」一樣的效果，而不受背景限制 - 例如。他們現在可以使用jquery fadeIn進行動畫。有點哈克，但完成工作。

來源

2012-09-11 07:25:27

fadein css更改懸停

回答

相關問題