具有不相等图像的翻转效果

Question

在我的网站上，我正在尝试让翻转效果正常工作。
目前，在no mouse hover，ul li项显示为文本，但在mouse hover上，它具有翻转效果来显示图像。

我想要的是图像，而不是让文本处于正常的鼠标非悬停状态。
这意味着，鼠标悬停和非鼠标悬停都是不同的图像，并且没有文本
我想问一下，与我目前的情况相比，我如何获得这样的翻转效果。（非鼠标悬停是我也想更改为图像的文本）

以下是我目前如何进行翻转的jsfiddle：http://jsfiddle.net/PF35v/7/

Answer 1

默认情况下，

您将所有图像都隐藏起来，因此当您将图像放入a标签中时，它也会被隐藏。

ul#nav li a img { display: block; }

这将使链接中的图像始终可见，但默认情况下其他图像隐藏。我想这就是你要的。

Answer 2

这里有两种不同的方法，我相信还有其他方法：

以网页为中心

<ul id="nav">
    <li>
        <a href="#">
            <span>My Text</span>
            <img src="http://goo.gl/tYsDU"/>
            <img class="hover" src="http://goo.gl/UohAz"/>
        </a>
    </li>
    ...
</ul>
#nav,
#nav li {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#nav li a img {
    display: inline;
}
#nav li a img.hover,
#nav li a span {
    display: none;
}
#nav li a:hover img {
    display: none;
}
#nav li a:hover img.hover {
    display: inline;
}

http://jsfiddle.net/RdRcj/1

以 CSS 为中心

<ul id="nav">
    <li>
        <a href="#" alt="My Text"></a>
    </li>
    ...
</ul>
#nav,
#nav li {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#nav li {
    width: 128px;
    height: 128px;
    background-image: url(http://goo.gl/tYsDU);
}
#nav li a {
    display: block;
    width: 128px;
    height: 128px;
    padding: 0;
}
#nav li a:hover {
    background-image: url(http://goo.gl/UohAz);
}

http://jsfiddle.net/RdRcj/

从灵活性的角度来看，第一个可能是"最好的";你不必像第二个那样硬烘焙尺寸。但是，如果它们保持不变，也许第二个更适合您的方法，它只需要针对每个li并专门针对a，这可能会有点脆弱。