背景过渡添加类

Question

我正在寻找一种基于添加类来改变行背景的方法。

在我正在开发的地方，我给你留了一个例子：

https://www.ai6.it/#rowContattaci

当你通过传递图片到div类#rowContattaci的上面时，向#rowContattaci添加一个类.hover，但是我不能在后台添加过渡，它可以快速工作。

我想知道的是，添加背景效果的正确方式是正确的，还是正确的，但我做错了什么？

​

jQuery( ".customImageContattaci" ).hover(
  function() {
    jQuery('#rowContattaci').addClass( "hover" );
  }, function() {
    jQuery('#rowContattaci').removeClass( "hover" );
  }
);

#rowContattaci {
  background: white;
       padding-left: 0px !important;
    padding-right: 30% !important;
    transition: 1s;
    margin-left: 0% !important;
    left: 0px !important;
}
#rowContattaci.hover {
  background: url('https://www.ai6.it/wp-content/uploads/2018/08/contatti.jpg');
  transition: 2s !important;
}
#rowContattaci.hover .customImageContattaci {
  opacity: 0;
 transition: 2s !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rowContattaci" data-vc-full-width="true" data-vc-full-width-init="true" class="vc_row wpb_row vc_row-fluid eightRow sectionContattaci rowHome section" style="position: relative; left: -231.094px; box-sizing: border-box; width: 1920px; padding-left: 231.094px; padding-right: 242.906px;"><div class="wpb_column vc_column_container vc_col-sm-6"></div><div class="wpb_column vc_column_container vc_col-sm-6"><div class="vc_column-inner "><div class="wpb_wrapper"><div class="wpb_single_image wpb_content_element vc_align_center   customImageContattaci"><figure class="wpb_wrapper vc_figure"><div class="vc_single_image-wrapper   vc_box_border_grey"><img width="745" height="891" src="https://www.ai6.it/wp-content/uploads/2018/07/home-page-contatti.jpg" class="vc_single_image-img attachment-full" alt="" srcset="https://www.ai6.it/wp-content/uploads/2018/07/home-page-contatti.jpg 745w, https://www.ai6.it/wp-content/uploads/2018/07/home-page-contatti-251x300.jpg 251w, https://www.ai6.it/wp-content/uploads/2018/07/home-page-contatti-122x146.jpg 122w, https://www.ai6.it/wp-content/uploads/2018/07/home-page-contatti-42x50.jpg 42w, https://www.ai6.it/wp-content/uploads/2018/07/home-page-contatti-63x75.jpg 63w" sizes="(max-width: 745px) 100vw, 745px"></div></figure></div></div></div></div></div>

​

Answer 1

您可以将背景视为伪元素。下面是我使用悬停效果的一个示例，您可以轻松地将其替换为一个类：

​

body {
  margin: 0;
  position: relative;
  height: 100vh;
  background: pink;
  z-index: 0;
}

body:before {
  content: "";
  position: absolute;
  z-index: -1;
  background: url(https://picsum.photos/800/600?image=1069);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  transition: 1s;
}

body:hover::before {
  opacity: 1;
}

​