时间戳

首页 > 解决方案 > 连续创建背景过渡

javascript - 连续创建背景过渡

问题描述

我有一排里面有两个块，当传递图片时，背景图像会在该行中打开。

不幸的是，我不能改变太多的 html 代码，而我可以用 css 来改变它。

因此，当我转到内部图像时，将悬停类添加到该行中。

我希望背景以某种方式进行过渡。现在它只需要一个镜头，我无法改变它。

这是我的CSS：

#rowContattaci {
    background: black;
    padding-left: 0px !important;
    padding-right: 30% !important;
    transition: 1s;
    min-height:100px;
    margin-left: 0% !important;
    left: 0px !important;
}

#rowContattaci.hover {
    background: url("https://onaliternote.files.wordpress.com/2016/11/wp-1480230666843.jpg?crop");
    transition: 2s !important;
}
<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>

标签： javascriptjqueryhtmlcss

解决方案

它看起来像一个错字。有用的参考：CSS：悬停选择器

无论如何更改#rowContattaci.hover以#rowContattaci:hover解决您的问题。

更新片段：

#rowContattaci {
    background: black;
    padding-left: 0px !important;
    padding-right: 30% !important;
    transition: 1s;
    min-height:100px;
    margin-left: 0% !important;
    left: 0px !important;
}

#rowContattaci:hover {
    background: url("https://onaliternote.files.wordpress.com/2016/11/wp-1480230666843.jpg?crop");
    transition: 2s !important;
}
<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>

PS我的建议：

1) 将所有样式放在一起，即不要将一半样式保持在内联和一半外置。

2) 避免在任何地方使用 !important。

推荐阅读