文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >翻转Divs后过渡持续时间延迟

问翻转Divs后过渡持续时间延迟
EN

Stack Overflow用户
提问于 2018-05-06 17:34:11
回答 1查看 64关注 0票数 0

我不能让滚动图像(例如，.rolled-thumb-1)在滚动图像拇指后保持显示。它应该使用与此演示中完全相同的转换延迟属性，但不会。翻滚大拇指可以创建一个绝对定位的div，而不是替换初始大图像的背景图像。

应该这样做的选择器是：

代码语言：javascript
复制
.rolled {
  transition: background-image .1s 604800s;
  background-size: cover;
  /* background-image: url('https://cml.sad.ukrd.com/tp/3x2/'); - transparent img */
}

在上面盘旋，例如，第一个拇指：

代码语言：javascript
复制
#thumb-1:hover .rolled-thumb-1 {
  background-image: url('https://cml.sad.ukrd.com/image/394545.jpg');
  transition: background-image 0s;
  transition-delay: 0s;
}

我注意到许多其他类似的帖子提到重新排序过渡和过渡延迟规则，我已经这样做了，但没有任何效果。如果我取消上面的透明注释，那么只有一个图像可以工作，但是不会更改回，只有一个可以工作。我认为这与从一开始就没有什么关系有关，因为它在BG图像出现的时候有些过渡，虽然不合适。

有人有什么想法吗？解释一下我做错了什么会很有帮助的。谢谢你的帮助

​

代码语言：javascript
复制
/* 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;
  }
}
代码语言：javascript
复制
<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>

​

UPDATE --这类似于我的另一篇文章，但与另一篇文章的解决方案不同，它不适用于这个帖子。不试图垃圾邮件和真正不知道如何解决这一问题。

html
css
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-05-06 20:26:22

​

代码语言：javascript
复制
/* 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;
  }
}
代码语言：javascript
复制
<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>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/50202656

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档