如何修复悬停时背景图像的 CSS 过渡？

Question

我正在学校项目中制作一个电子商务网站，我想在导航栏块（ul 内的 lis）上进行 CSS 转换，就像我将鼠标悬停在背景块上时一样-显示该块的图像，但似乎过渡不起作用，只有正常的即时悬停发生。

这是我的代码，仅显示导航栏的一个块，即目录:

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

Answer 1

你不能像那样转换背景图像。

您可以尝试在背景顶部添加额外的 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>

Answer 2

您不需要在过渡属性上使用歌剧 (-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。我已经更改了图像以进行测试。

Answer 3

希望对您有所帮助。

#YourDIV {
    background-image: url(Yourimage.jpg) no-repeat;
}

#YourDIV:hover {
  background-image: url(Yourimage.jpg) no-repeat;
    background-size: 150%;
}

如何修复悬停时背景图像的 CSS 过渡？

how to fix CSS transition for a background-image on hover?

html

css

navbar

css-transitions