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更改悬停

回答

相关问题