我有一行,里面有两个 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>
最佳答案
看起来像是打字错误。有用的引用: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。
关于javascript - 连续创建背景过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51952604/