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

Question

在我的网站上，我试图让翻转效果发挥作用。
目前，在 上no mouse hover，该ul li项目显示为文本，但在 上mouse hover，它具有显示图像的翻转效果。

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

这是我目前如何翻车的 jsfiddle：http: //jsfiddle.net/PF35v/7/

Answer 1

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

以 HTML 为中心

<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这可能有点脆弱。

Answer 2

您默认隐藏所有图像，因此当您将图像放入a标签内时，它也会被隐藏。

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

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