Question

<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的情况下在列表翻转状态下提供这些“按钮”？我总是画一个空白......

这些链接必须是图片。

Answer 1

如果你支持更新的浏览器（支持所有元素的:hover选择器的浏览器，基本上除了IE6之外的所有内容，请参阅here），如果您更改了HTML，则可以使用CSS执行此操作。您需要删除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>

Answer 2

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

我更喜欢使用display选项，因为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>

Answer 3

您可以尝试使用透明图像作为主要链接，然后使用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>

您只需要记住相关图片的大小。

CSS图像翻转

3 个答案: