2 
<div id="navigation>
    <ul class="navlist">
        <li><img src="images/btn1.gif"/></li>
        <li><img src="images/btn2.gif"/></li>
        <li><img src="images/btn3.gif"/></li>
    </ul>
</div>

在不使用 JS 的情况下，我如何能够在列表翻转状态中提供这些“按钮”？我完全画了一个空白...

这些链接必须是图像。

4

3 回答 3

3

如果您支持较新的浏览器（支持:hover所有元素上的选择器的浏览器，基本上是除了 IE6 之外的所有内容，请参见此处），您可以使用 CSS 执行此操作，前提是您更改了 HTML。您将需要删除img标签，而是使用背景图像。

CSS（这是带有 2 个图像的简单示例，您需要设置高度 + 宽度。如果您有许多不同的图像，则每个图像都需要一个 css 类）：

<style type="text/css">
    .navlist li { width: 32px; height: 32px; background-repeat: no-repeat; background-image: url('images/image1.gif'); }
    .navlist li:hover { background-image: url('images/image2.gif'); }
</style>

HTML：

<div id="navigation">
    <ul class="navlist">
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
于 2010-06-17T01:28:45.740 回答
2

有很多方法可以做到这一点。基本上，悬停时将一张图像移出屏幕。或者，您可以在悬停时更改两个图像的 z-index，或者您可以使用背景图像或显示选项来更改。

我更喜欢使用显示选项，因为 CSS 非常简单。

由于它是通过类完成的，因此您可以根据需要添加任意数量的按钮。

这是包含 HTML 和 CSS 的页面的代码。 DOCTYPE 声明是使其在 IE 中工作所必需的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/\xhtml1/DTD/xhtml1-strict.dtd">
    <head>
        <style type="text/css">
            a img {
                border:none;
            }
            ul {
                list-style-type: none;
            }
            img.defaultSt {
                display: inline;
            }
            img.hoverSt {
                display: none;
            }
            li:hover img.defaultSt {
                display: none;
            }
            li:hover img.hoverSt {
                display: inline;
            }
        </style>
    </head>
    <body>
        <div id="navigation">
            <ul class="navlist">
                <li>
                    <img class="defaultSt" src="http://mrg.bz/vh60HV" />
                    <img class="hoverSt" src="http://mrg.bz/CcDOmL" />
                </li>
            </ul>
        </div>
    </body>
</html>
于 2010-06-17T01:22:34.453 回答
0

您可以尝试使用透明图像作为主要链接，然后使用 css 更改背景

<style type="text/css">
    a.img1, a.img1:link { background-image: url(images/btn1.gif); }
    a.img1:hover { background-image: url(images/btn1_over.gif); }

    a.img2, a.img2:link { background-image: url(images/btn2.gif); }
    a.img2:hover { background-image: url(images/btn2_over.gif); }

    a.img3, a.img3:link { background-image: url(images/btn3.gif); }
    a.img3:hover { background-image: url(images/btn3_over.gif); }
</style>

<div id="navigation>
    <ul class="navlist">
        <li><a class="img1" href=""><img src="images/transparent_image.gif" width="x" height="y"/></a></li>
        <li><a class="img2" href=""><img src="images/transparent_image.gif" width="x" height="y"/></a></li>
        <li><a class="img3" href=""><img src="images/transparent_image.gif" width="x" height="y"/></a></li>
    </ul>
</div>

您只需要记住相关图像的大小即可。

于 2010-06-17T01:23:23.370 回答