Fadein CSS изменить при наведении

Question

есть 4 дел.У всех есть фоновые изображения, когда вы наводите курсор мыши на div1, скрипт должен изменить фоновое изображение в div 2, 3, 4. Это должно быть анимировано (fadein?).

Это код, полученный после часов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)');
        });

Answer 1

Другой подход может состоять в том, чтобы иметь их как img и стилизовать их с более низким z-index, чтобы наложить их на другой контент. Это может создать тот же эффект, что и их наличие в качестве «фонов» без ограничений, связанных с фоном, например. теперь они могут быть анимированы с помощью jquery fadeIn. В некотором роде хак, но выполняет свою работу.

Answer 2

Если вы ищете, чтобы сначала не исчезали div-объекты, а затем появлялись новые фоны, вам понадобится что-то вроде этого:

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

Answer 3

Если вам нужно, чтобы фоновые изображения исчезали непосредственно от одного к другому, вы можете попробовать вложить один 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>

Answer 4

Фоновые изображения не могут быть анимированы. Можно анимировать только цвета или другие скалярные значения.