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

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

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

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

2 个答案: