html - CSS 图像翻转

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 )，只要您进行更改，您就可以使用 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>