我无法获得翻转图像（例如.rolled-thumb-1）以在滚动图像大拇指后保持显示。它应该使用转换延迟属性，就像在demo中一样，但不是。滚动拇指会创建一个绝对定位的div，而不是替换初始大图像的背景图像。
应该这样做的选择器是：
.rolled {
transition: background-image .1s 604800s;
background-size: cover;
/* background-image: url('https://cml.sad.ukrd.com/tp/3x2/'); - transparent img */
}
例如，将鼠标悬停在第一个拇指上：
#thumb-1:hover .rolled-thumb-1 {
background-image: url('https://cml.sad.ukrd.com/image/394545.jpg');
transition: background-image 0s;
transition-delay: 0s;
}
我注意到很多其他类似的帖子提到重新排序过渡和过渡延迟规则，我已经完成但无济于事。如果我取消注释上面的透明，只有一个图像可以工作，但是后来没有改变，只有1个工作。我认为这与首先没有任何过渡有关，因为它在BG图像出现时有些过渡，但不是很好。
有没有人有任何想法？对我做错的解释会非常有帮助。谢谢你的帮助
/* images */
#main-image { background-image: url('https://cml.sad.ukrd.com/image/661835.jpg') }
#thumb-1 { background-image: url('https://cml.sad.ukrd.com/image/394545.jpg') }
#thumb-2 { background-image: url('https://cml.sad.ukrd.com/image/572806.jpg') }
#thumb-3 { background-image: url('https://cml.sad.ukrd.com/image/486757.jpg') }
#thumb-4 { background-image: url('https://cml.sad.ukrd.com/image/612357.jpg') }
/* images */
* {
margin: 0;
padding: 0;
font-family: arial;
line-height: 1.5em;
box-sizing: border-box;
}
#images-and-hook-container {
width: 100%;
height: auto;
float: left;
background: cyan;
display: flex; /* allows hook container to be full height */overflow: hidden;
position:relative;
}
#hook-container {
background: blue;
float: left;
width: 33%;
height: auto;
padding: 3% 0 0 3%;
position: absolute;
height: 100%;
right: 0;
top: 0;
}
#hook-container > span {
font-weight: bold;
font-size: 1.5em;
}
#hook-container > ul {
list-style-type: none;
font-size: 1em;
}
#hook-container ul li:before {
content: '✓ ';
color: green;
}
#images-wrap {
width: 67%;
height: auto;
float: left;
position: relative;
}
#main-image {
width: 79%;
float: left;/*
background-size: cover !important;
background-position: center center !important;*/
height: auto;
width: 100%;
padding-bottom: 52.666%;
background-size: contain;
background-position: left top;
background-repeat: no-repeat;
position: relative;
}
#image-thumbs {
width: 19%;
float: left;
margin-left: 2%;
position: absolute;
right: 0;
height: 100%;
overflow-x: visible !important;
overflow-y: visible !important;
}
.image-thumb {
margin-bottom: 4%;
background-position: center center;
background-size: cover;
width: 100%;
height: auto;
padding-bottom: 66.666%;
}
.image-thumb:last-of-type { margin-bottom: 0 }
.image-thumb:hover { cursor: pointer }
@media (max-width: 768px) {
body { background: red }
#images-and-hook-container {
flex-direction: column;
}
#images-wrap {
position: static;
width: 100%;
}
#hook-container {
width: 100%;
padding: 3% 0;
position: static;
}
#main-image {
width: 100%;
padding-bottom: 66.666%;
padding-bottom: 84.333%; /* 125*2/3 (+1 for margin bottom) */
}
#image-thumbs {
width: 100%;
margin-left: 0;
top: 0;
left: 0;
display: flex;
flex-wrap: nowrap;
overflow-x: visible !important;
overflow-y: visible !important;
}
.image-thumb {
float: left;
margin-bottom: 6px;
width: 24.333%;
padding-bottom: 16.666%;
flex: 1 0 24.333%;
margin-left: 1%;
}
.image-thumb:first-of-type { margin-left: 0 }
#aspect-ratio-wrap {
float: left;
width: 100%;
height: auto;
padding-bottom: 16.666%;
background: orange;
position: absolute;
bottom: 0;
overflow-x: visible !important;
overflow-y: visible !important;
}
#main-image-area {
position: absolute;
left: 0;
top: 0;
background: transparent;
width: 100%;
height: 79%;
z-index: 99;
}
}
#thumb-1, #thumb-2, #thumb-3, #thumb-4 {position:relative}
.rolled-thumb-1, .rolled-thumb-2, .rolled-thumb-3, .rolled-thumb-4 {
position: absolute;
background: pink;
width: 411%;
height: 400%;
top: -406%;
z-index: 9;
}
.rolled-thumb-2 {left:-104%}
.rolled-thumb-3 {left:-208%}
.rolled-thumb-4 {left:-312%}
.rolled-thumb-1, .rolled-thumb-2, .rolled-thumb-3, .rolled-thumb-4 { background-color: transparent }
.rolled {
transition: background-image .1s 604800s;
background-size: cover;
/* background-image: url('https://cml.sad.ukrd.com/tp/3x2/'); */
}
#thumb-1:hover .rolled-thumb-1 {
background-image: url('https://cml.sad.ukrd.com/image/394545.jpg');
transition: background-image 0s;
transition-delay: 0s;
}
#thumb-2:hover .rolled-thumb-2 {
background-image: url('https://cml.sad.ukrd.com/image/572806.jpg');
transition: background-image 0s;
transition-delay: 0s;
}
#thumb-3:hover .rolled-thumb-3 {
background-image: url('https://cml.sad.ukrd.com/image/486757.jpg');
transition: background-image 0s;
transition-delay: 0s;
}
#thumb-4:hover .rolled-thumb-4 {
background-image: url('https://cml.sad.ukrd.com/image/612357.jpg');
transition: background-image 0s;
transition-delay: 0s;
}
@media (min-width: 768px) {
.rolled-thumb-1, .rolled-thumb-2, .rolled-thumb-3, .rolled-thumb-4 {
width: 414.5%;
height: 416%;
top: 0;
left: -425%;
}
.rolled-thumb-2 { top: -106% }
.rolled-thumb-3 { top: -212% }
.rolled-thumb-4 { top: -318% }
#main-image-area {
position: absolute;
left: 0;
top: 0;
background: transparent;
width: 79%;
height: 100%;
z-index: 99;
}
}<div id='images-and-hook-container'>
<div id="images-wrap">
<div id="main-image"><div id='main-image-area'></div>
<div id='aspect-ratio-wrap'>
<div id="image-thumbs">
<div class="image-thumb" id="thumb-1"><div class='rolled rolled-thumb-1'></div></div>
<div class="image-thumb" id="thumb-2"><div class='rolled rolled-thumb-2'></div></div>
<div class="image-thumb" id="thumb-3"><div class='rolled rolled-thumb-3'></div></div>
<div class="image-thumb" id="thumb-4"><div class='rolled rolled-thumb-4'></div></div>
</div>
</div>
</div>
</div>
<div id='hook-container'>
<span>Summary</span>
<ul>
<li>key selling point</li>
<li>key selling point</li>
<li>key selling point</li>
</ul>
</div>
</div>
更新 这与我的其他帖子类似，但不同，因为其他帖子的解决方案不适用于此帖子。不试图垃圾邮件，真的不知道如何解决这个问题。
答案 0 :(得分：1)
/* images */
#main-image { background-image: url('https://cml.sad.ukrd.com/image/661835.jpg') }
#thumb-1 { background-image: url('https://cml.sad.ukrd.com/image/394545.jpg') }
#thumb-2 { background-image: url('https://cml.sad.ukrd.com/image/572806.jpg') }
#thumb-3 { background-image: url('https://cml.sad.ukrd.com/image/486757.jpg') }
#thumb-4 { background-image: url('https://cml.sad.ukrd.com/image/612357.jpg') }
/* images */
* {
margin: 0;
padding: 0;
font-family: arial;
line-height: 1.5em;
box-sizing: border-box;
}
#images-and-hook-container {
width: 100%;
height: auto;
float: left;
background: cyan;
display: flex; /* allows hook container to be full height */overflow: hidden;
position:relative;
}
#hook-container {
background: blue;
float: left;
width: 33%;
height: auto;
padding: 3% 0 0 3%;
position: absolute;
height: 100%;
right: 0;
top: 0;
}
#hook-container > span {
font-weight: bold;
font-size: 1.5em;
}
#hook-container > ul {
list-style-type: none;
font-size: 1em;
}
#hook-container ul li:before {
content: '✓ ';
color: green;
}
#images-wrap {
width: 67%;
height: auto;
float: left;
position: relative;
}
#main-image {
width: 79%;
float: left;/*
background-size: cover !important;
background-position: center center !important;*/
height: auto;
width: 100%;
padding-bottom: 52.666%;
background-size: contain;
background-position: left top;
background-repeat: no-repeat;
position: relative;
}
#image-thumbs {
width: 19%;
float: left;
margin-left: 2%;
position: absolute;
right: 0;
height: 100%;
overflow-x: visible !important;
overflow-y: visible !important;
}
.image-thumb {
margin-bottom: 4%;
background-position: center center;
background-size: cover;
width: 100%;
height: auto;
padding-bottom: 66.666%;
}
.image-thumb:last-of-type { margin-bottom: 0 }
.image-thumb:hover { cursor: pointer }
@media (max-width: 768px) {
body { background: red }
#images-and-hook-container {
flex-direction: column;
}
#images-wrap {
position: static;
width: 100%;
}
#hook-container {
width: 100%;
padding: 3% 0;
position: static;
}
#main-image {
width: 100%;
padding-bottom: 66.666%;
padding-bottom: 84.333%; /* 125*2/3 (+1 for margin bottom) */
}
#image-thumbs {
width: 100%;
margin-left: 0;
top: 0;
left: 0;
display: flex;
flex-wrap: nowrap;
overflow-x: visible !important;
overflow-y: visible !important;
}
.image-thumb {
float: left;
margin-bottom: 6px;
width: 24.333%;
padding-bottom: 16.666%;
flex: 1 0 24.333%;
margin-left: 1%;
}
.image-thumb:first-of-type { margin-left: 0 }
#aspect-ratio-wrap {
float: left;
width: 100%;
height: auto;
padding-bottom: 16.666%;
background: orange;
position: absolute;
bottom: 0;
overflow-x: visible !important;
overflow-y: visible !important;
}
#main-image-area {
position: absolute;
left: 0;
top: 0;
background: transparent;
width: 100%;
height: 79%;
z-index: 99;
}
}
#thumb-1, #thumb-2, #thumb-3, #thumb-4 {position:relative}
.rolled-thumb-1, .rolled-thumb-2, .rolled-thumb-3, .rolled-thumb-4 {
position: absolute;
background: pink;
width: 411%;
height: 400%;
top: -406%;
z-index: 9;
opacity: 0;
transition: opacity 1s 3s ease;
background-color: transparent;
}
.rolled-thumb-2 {left:-104%}
.rolled-thumb-3 {left:-208%}
.rolled-thumb-4 {left:-312%}
.rolled {
background-size: cover;
/* background-image: url('https://cml.sad.ukrd.com/tp/3x2/'); */
}
#thumb-1:hover .rolled-thumb-1 {
opacity: 1;
transition: opacity 1s 0s ease;
}
#thumb-2:hover .rolled-thumb-2 {
opacity: 1;
transition: opacity 1s 0s ease;
}
#thumb-3:hover .rolled-thumb-3 {
opacity: 1;
transition: opacity 1s 0s ease;
}
#thumb-4:hover .rolled-thumb-4 {
opacity: 1;
transition: opacity 1s 0s ease;
}
.rolled-thumb-1 {
background-image: url('https://cml.sad.ukrd.com/image/394545.jpg');
}
.rolled-thumb-2 {
background-image: url('https://cml.sad.ukrd.com/image/572806.jpg');
}
.rolled-thumb-3 {
background-image: url('https://cml.sad.ukrd.com/image/486757.jpg');
}
.rolled-thumb-4 {
background-image: url('https://cml.sad.ukrd.com/image/612357.jpg');
}
@media (min-width: 768px) {
.rolled-thumb-1, .rolled-thumb-2, .rolled-thumb-3, .rolled-thumb-4 {
width: 414.5%;
height: 416%;
top: 0;
left: -425%;
}
.rolled-thumb-2 { top: -106% }
.rolled-thumb-3 { top: -212% }
.rolled-thumb-4 { top: -318% }
#main-image-area {
position: absolute;
left: 0;
top: 0;
background: transparent;
width: 79%;
height: 100%;
z-index: 99;
}
}<div id='images-and-hook-container'>
<div id="images-wrap">
<div id="main-image"><div id='main-image-area'></div>
<div id='aspect-ratio-wrap'>
<div id="image-thumbs">
<div class="image-thumb" id="thumb-1"><div class='rolled rolled-thumb-1'></div></div>
<div class="image-thumb" id="thumb-2"><div class='rolled rolled-thumb-2'></div></div>
<div class="image-thumb" id="thumb-3"><div class='rolled rolled-thumb-3'></div></div>
<div class="image-thumb" id="thumb-4"><div class='rolled rolled-thumb-4'></div></div>
</div>
</div>
</div>
</div>
<div id='hook-container'>
<span>Summary</span>
<ul>
<li>key selling point</li>
<li>key selling point</li>
<li>key selling point</li>
</ul>
</div>
</div>