背景图像悬停过渡延迟

Question

我正在尝试使用转换延迟黑客来避免javascript正确显示图像翻转。它适用于带有彩色拇指的div，因为它会改变主图像并在鼠标滑离拇指时停留，但当您将鼠标悬停在图片拇指上时，主图像在鼠标悬停时不会停留。

为什么会这样？我试过transition: background-image 0s，但无济于事。

body {
  margin: 0;
  padding: 0;
}

#container {
  width: 100vw;
  height: 100vh;
  background: #eee;
}

#redL {
  background: red;
}

#greenL {
  background: green;
}

#blueL {
  background-image: url('https://cml.sad.ukrd.com/image/486757.jpg');
  background-position: center center;
  background-size: cover;
}

label {
  display: block;
  width: 50px;
  height: 50px;
  float: left;
  margin: 20px;
}

#redL:hover ~ #big {
  background: red;
  transition-delay: 0s;
}

#greenL:hover ~ #big {
  background: green;
  transition-delay: 0s;
}

#blueL:hover ~ #big {
  background-image: url('https://cml.sad.ukrd.com/image/486757.jpg');
  /* background: blue; */
  transition: background-image 0s;
  transition-delay: 0s;
}

#big {
  width: 50vw;
  height: 50vh;
  background: #fff;
  clear: both;
  margin: auto;
  transition: all .1s 604800s;
}

<div id="container">
  <label id="redL"></label>
  <label id="greenL"></label>
  <label id="blueL"></label>
  
  <div id="big">

  </div>
</div>

Answer 1

  

规则说：为了实现转换，必须已经设置了目标属性。

这是非常直截了当的，如果没有什么可以转换的话，你就无法进行转换，你可能正在寻找动画。

反正

在您的情况下，div#big没有background-image所以没有进行转换，因此您的hackie延迟不起作用，因为那里＆＃39 ;没有过渡到延迟。

解决方法是默认将div#id设置为img，如果必须，则设置起始/占位符img。

而且你也不能混合颜色和imgs，因为规则说你必须设置相同的属性，背景颜色和背景图像，互相覆盖。

＆＃13;

＆＃13;

body {
  margin: 0;
  padding: 0;
}

#container {
  width: 100vw;
  height: 100vh;
  background: #eee;
}

#redL {
  background-image: url('https://cml.sad.ukrd.com/image/486754.jpg');
}

#blueL {
  background-image: url('https://cml.sad.ukrd.com/image/486757.jpg');
  background-position: center center;
  background-size: cover;
}

label {
  display: block;
  width: 50px;
  height: 50px;
  float: left;
  margin: 20px;
}

#redL:hover ~ #big {
  background-image: url('https://cml.sad.ukrd.com/image/486754.jpg');
  transition-delay: 0s;
}

#blueL:hover ~ #big {
  background-image: url('https://cml.sad.ukrd.com/image/486757.jpg');
  /* background: blue; */
  transition-delay: 0s;
 
}

#big {
  width: 50vw;
  height: 50vh;
  background: #fff;
  clear: both;
  margin: auto;
  background-image: url('https://cml.sad.ukrd.com/image/486756.jpg');
  transition: all .1s 604800s;
}

＆＃13;

<div id="container">
  <label id="redL"></label>
  <label id="blueL"></label>
  
  <div id="big">

  </div>
</div>

＆＃13;

＆＃13;

＆＃13;