Как исправить CSS-переход для фонового изображения при наведении? - PullRequest
Новая
       11

Как исправить CSS-переход для фонового изображения при наведении?

2 голосов
/ 05 апреля 2019

Я работаю в школьном проекте по созданию веб-сайта электронной коммерции. Я хочу сделать CSS-переход для блоков navbar (lis внутри ul), как при наведении на блок фонового изображения этого блока.вверх, но кажется, что переход не работает, и происходит только нормальное мгновенное наведение.

это мой код, показывающий только один блок панели навигации, который является каталогом : 

#catalogue {
  -o-transition-property: all;
  -o-transition-duration: 2s;
  -o-transition-timing-function: ease-in-out;
  -o-transition-delay: 2s;
  background-size: cover;
  background-repeat: no-repeat;
}

#catalogue:hover {
  display: inline-block;
  margin-left: 70px;
  position: relative;
  background-image: url(f1.png);
  background-size: 125px 70px;
  color: #000;
  font-weight: 600;
}
<nav>
  <ul>
    <li id="home"><a>Home</a></li>
    <li id="catalogue"><a>Catalogue</a></li>
    <li id="news"><a>News&Trends </a></li>
    <li id="contact"><a>Contact us</a></li>
  </ul>

Ответы [ 2 ]

2 голосов
/ 05 апреля 2019

Вам не нужно использовать префиксы opera (-o-) в свойствах перехода. CSS-переходы больше не требуют префиксов: http://shouldiprefix.com/#transitions

Вместо переходов, для фонового эффекта, вы должны использовать CSS-анимацию - потому что на сегодняшний день невозможно применить переходы к фоновым свойствам. 

li {
  transition: all 2s ease-in-out 2s;
  background-size: cover;
  background-repeat: no-repeat;
}

li:hover {
  margin-left: 70px;
  position: relative;
  background-size: 125px 70px;
  color: #000;
  font-weight: 600;
  animation: backgroundIMG 2s ease-in-out 2s;
  animation-fill-mode: forwards;
}

@keyframes backgroundIMG {
  100% { background-image: url(http://www.rayesdesign.com/glitters/blue/blue016.gif); }
}

Смотрите это здесь: https://jsfiddle.net/Lkawnpg6/1/

Ps. Я изменил изображение для тестирования.

1 голос
/ 05 апреля 2019

Вы не можете перенести фоновое изображение таким образом.

Вы можете попробовать добавить дополнительный div сверху с фоном (или псевдоэлементом: before или: after) и затем изменить его непрозрачность.

Обычно вы бы изменили цвет фона, как показано ниже 

.box {
  display: block;
  width: 100px;
  height: 100px;
  background-color: green;
  transition: background-color 0.3s ease;
}

.box:hover {
  background-color: red;
}
<div class="box"></div>
...