时间戳

首页 > 解决方案 > 背景过渡添加类

jquery - 背景过渡添加类

问题描述

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

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

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

当您#rowContattaci通过传递图像超过 div 类时，将一个类添加.hover到#rowContattaci，但我无法在背景中添加过渡并且它可以快速工作。

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

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>

标签： jqueryhtmlcss

解决方案

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

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;
}

推荐阅读