Html CSS图像交换；将无法正确显示

我正在尝试将悬停图像交换添加到我的网站库中。下面是我目前拥有的CSS代码。HTML文件中的原始图像显示正确，但当我将鼠标悬停在它们上方时，这些图像不会切换

CSS:

------------------>HTML

    <ul id="gallery"> 
    <li><img src="/images/ferrari-gray.jpg" alt=""/></li>
    <li><img src="/images/dalmation-gray.jpg" alt=""/></li>
    <li><img src="/images/hanauma-gray.jpg" alt=""/></li>
    <li><img src="/images/aircraft-sunset-gray.jpg" alt=""/></li>
    <li><img src="/images/crab-gray.jpg" alt=""/></li>
    <li><img src="/images/moth-gray.jpg" alt=""/></li>
    <li><img src="/images/lake-gray.jpg" alt=""/></li>
    <li><img src="/images/flag-gray.jpg" alt=""/></li>
    <li><img src="/images/aircraft-landing.jpg" alt=""/></li>
    <li><img src="/images/tarantula.jpg" alt=""/> </li>
</ul>

您可以使用

@keyframes

动画来执行此操作，但如果不对其他元素或伪元素和不透明度使用一些技巧，则不会进行转换

@keyframes changeImage {
    0%   { background-image: url(/images/tarantula.jpg); }
    10%  { background-image: url(/images/aircraft-landing.jpg); }
    20%  { background-image: url(/images/flag.jpg); }
    30%  { background-image: url(/images/lake.jpg); }
    40%  { background-image: url(/images/moth.jpg); }
    50%  { background-image: url(/images/crab.jpg); }
    60%  { background-image: url(/images/aircraft-sunset.jpg); }
    70%  { background-image: url(/images/hanauma.jpg); }
    80%  { background-image: url(/images/dalmation.jpg); }
    90%  { background-image: url(/images/ferrari.jpg); }
}
@-webkit-keyframes changeImage {
    0%   { background-image: url(/images/tarantula.jpg); }
    10%  { background-image: url(/images/aircraft-landing.jpg); }
    20%  { background-image: url(/images/flag.jpg); }
    30%  { background-image: url(/images/lake.jpg); }
    40%  { background-image: url(/images/moth.jpg); }
    50%  { background-image: url(/images/crab.jpg); }
    60%  { background-image: url(/images/aircraft-sunset.jpg); }
    70%  { background-image: url(/images/hanauma.jpg); }
    80%  { background-image: url(/images/dalmation.jpg); }
    90%  { background-image: url(/images/ferrari.jpg); }
}

---

唯一的其他选择（可能是更好的选择）是使用javascript

您不能在以下两者之间留有空格：

img  :hover 

它必须是：

img:hover 

---

我不知道多个背景图像是关于什么的。

您是否尝试使用它，以便当您将鼠标悬停在图像上时，它将在所有这些背景图像之间滚动？CSS不是这样工作的。这确实需要javascript或CSS动画。你也可以发布你的HTML吗。我的图库中总共有10张图像，我想以灰度显示，然后在悬停在它们上面时切换到彩色版本。我的图库中总共有10张图像，我想以灰度显示，然后切换到彩色版本我在他们上空盘旋。至少这是我正在努力实现的目标。非常新的编码，但我知道WebKit并不是所有浏览器都支持的，所以我试图避免这种方式。这是一种类似的风格，我试图接近CSS，但我不知道要将哪个背景图像分配给哪个img元素。

img:hover