CSS продолжительность перехода с div не работает

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.

См. Приведенный ниже рабочий фрагмент, в котором используются изображения с placeholder.com:

#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>

Редактировать следующий комментарий OP о Firefox

Firefox на самом деле не поддерживает переходы фонового изображения, поскольку они явно не определены в CSS переходах spe c. Вы можете явно увидеть, что включено здесь .

Существуют некоторые предлагаемые обходные пути, которые включают в себя наложение двух элементов друг на друга, а затем затухание верхнего, чтобы показать нижний. - не элегантно, но может быть единственным выбором в этих обстоятельствах.

Answer 2

Лучше отделить фоновые атрибуты и установить переход для невыделенного селектора

#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>

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

Вам необходимо указать, какое CSS свойство вы хотите перенести, а не только продолжительность перехода.

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

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

Вот список свойств, которые вы можете перевести:

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