带div的CSS过渡持续时间不起作用

Question

我一直试图做一个悬停的东西，直到我将图像悬停为止，该图像应更改为另一个图像。。我成功完成了该过程，直到我想延长转身时间，我真的很困惑为什么它不起作用。 。

#Bild-Rechts {
    background: url(bilder/Hintergrund-2.jpg) no-repeat;
    width: 605px;
    height:886px;
    float: right;
}

#Bild-Rechts:hover {
    background: url(bilder/HintergrundHover.jpg) no-repeat;
    transition-duration: 2000ms;
}

<section id="elektro_One">
    <div class="Box-Top"></div>
    <div id="Bild-Rechts"></div>
    <div id="Text-Middle-2">
        <h3>Wer sind wir?</h3>
	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata.</p>
    </div>
</section>

Answer 1

您最好在主要元素上设置过渡，而不是hover伪类。

请参阅下面的使用占位符图像的工作片段：

#Bild-Rechts {
  background: url(https://via.placeholder.com/150) no-repeat;
  width:      605px;
  height:     886px;
  float:      right;
  transition: background 2000ms;
}

#Bild-Rechts:hover {
  background: url(https://via.placeholder.com/200) no-repeat;
}

<section id="elektro_One">
  <div class="Box-Top"></div>
  <div id="Bild-Rechts"></div>
  <div id="Text-Middle-2">
    <h3>Wer sind wir?</h3>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata.</p>
  </div>
</section>

Answer 2

您还需要指定要转换的CSS属性，而不仅仅是转换持续时间。

.div {
  background: ...;
  transition: background 2000ms;
}

.div:hover {
  background: ...;
}

这里是您可以转换的属性列表：

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

Answer 3

您必须将transition-duration: 2000ms;移至

#Bild-Rechts {
    background: url(bilder/Hintergrund-2.jpg) no-repeat;
    width: 605px;
    height:886px;
    float: right;
    transition-duration: 2000ms;
}

并从中删除

#Bild-Rechts:hover {
    background: url(bilder/HintergrundHover.jpg) no-repeat;
}

祝你好运并尝试好

Answer 4

最好分离背景属性并为未悬停的选择器设置过渡

#Bild-Rechts	{
  background-image: url("https://via.placeholder.com/150/0000FF");
  background-repeat: no-repeat;
  background-size: cover;
  width: 160px;
  height: 160px;
  float: right;
  transition-duration: 1s;
}

#Bild-Rechts:hover	{
  background-image: url("https://via.placeholder.com/150/FF0000");
}

<section id="elektro_One">
	<div class="Box-Top"></div>
			<div id="Bild-Rechts"></div>
					<div id="Text-Middle-2">
						<h3>Wer sind wir?</h3>
						<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata.
						</p>
  				</div>
</section>