悬停时淡入CSS更改答案

【问题标题】：fadein css change on hover悬停时淡入CSS更改
【发布时间】：2012-01-21 21:51:28
【问题描述】：

有 4 个 div。都有背景图片，当您将鼠标悬停在 div1 上时，脚本应更改 div 2、3、4 中的背景图片。这应该是动画（淡入淡出？）。

这是经过几个小时的 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)');
        });

【问题讨论】：

标签： jquery fadein

【解决方案1】：

背景图像不能动画。只有颜色或其他标量值可以设置动画。

【讨论】：

【解决方案2】：

如果您正在寻找非悬停的 div 先淡出，然后使用新背景淡入，您将需要这样的东西：

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

【讨论】：

完美此解决方案完美运行！这就是我想要的，谢谢你的回复！抱歉回复晚了
没问题！有机会时选择它作为答案。

【解决方案3】：

如果您需要背景图像直接从一个渐变到另一个，您可以尝试将一个 div 嵌套在另一个 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>

【讨论】：

您好，感谢您的帮助。出于某种原因，我没有设法实现这个想法，但 skybondsor 的提示奏效了。

【解决方案4】：

另一种方法是将它们设置为 img 并使用较低的 z-index 设置它们的样式，以将它们分层放在其他内容后面。这可以产生与将它们作为“背景”相同的效果，而不受背景的限制 - 例如。它们现在可以使用 jquery fadeIn 进行动画处理。有点 hacky，但可以完成工作。

【讨论】：