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

【问题标题】：CSS image swapping; will not display correctlyCSS图像交换；将无法正确显示
【发布时间】：2014-01-31 16:30:16
【问题描述】：

我正在尝试将悬停图像交换添加到我的网站画廊。下面是我目前拥有的 CSS 代码。我的 HTML 文件中的原始图像可以正常显示，但是当我将鼠标悬停在它们上面时图像没有切换。

CSS：

#gallery img {
    max-height: 25%;
    margin: 10px 10px 10px 10px;
    float: right;
    border-radius: 17px 0 17px 0;
    border:2px solid #888888;   
    background-image: url(/images/ferrari.jpg);
    background-image: url(/images/dalmation.jpg);
    background-image: url(/images/hanauma.jpg);
    background-image: url(/images/aircraft-sunset.jpg);
    background-image: url(/images/crab.jpg);
    background-image: url(/images/moth.jpg);
    background-image: url(/images/lake.jpg);
    background-image: url(/images/flag.jpg);
    background-image: url(/images/aircraft-landing.jpg);
    background-image: url(/images/tarantula.jpg);
    display: block;
}

#gallery img :hover {
    visibility: hidden;
}

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

【问题讨论】：

您是否想要让它在您将鼠标悬停在图像上时，它会在所有这些背景图像之间滚动？这不是 CSS 的工作原理。
这肯定需要 javascript 或 CSS 动画
你能把你的 HTML 也发一下吗？
我的图库中有 10 张图像，我想以灰度显示，然后将鼠标悬停在它们上方时切换到彩色版本。

标签： html css image background-image swap

【解决方案1】：

您可以使用@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

【讨论】：

【解决方案2】：

您之间不能有空格：

img  :hover

必须是：

img:hover

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

【讨论】：

我的图库中有 10 张图像，我想以灰度显示，然后将鼠标悬停在它们上方时切换到彩色版本。至少这是我想要完成的。对编码非常陌生，但我知道所有浏览器都不支持 webkit，所以我试图避免这条路线。
这是我试图接近hexeract.org/101412/portfolio的类似风格
CSS 无法知道要将哪个背景图片分配给哪个 img 元素。