javascript - 连续创建背景过渡

Question

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

不幸的是，虽然我可以用 css 更改它，但我不能更改 html 代码。

所以当我转到内部图像时，悬停类被添加到该行。

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

这是我的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>

Answer 1

看起来像是打字错误。有用的引用:CSS :hover Selector

无论如何将 #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>

附言我的建议:

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

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