将鼠标悬停在链接选项上时切换图片答案

【问题标题】：switching pictures when hovering over a link choice将鼠标悬停在链接选项上时切换图片
【发布时间】：2011-02-02 05:02:57
【问题描述】：

我是新手。我正在用 html 编写，我很好奇当链接悬停时是否可以切换到另一个图像。

【问题讨论】：

标签： html image hover swap

【解决方案1】：

是的，您可以，here 是一个使用 javascript 的示例。

【讨论】：

【解决方案2】：

当然。如果您的代码如下所示：

<div class="menu">
<a href="1.html">First</a>
<a href="2.html">Second</a>
<a href="3.html">Third</a>
</div>

只需在你的头脑中添加一些样式：

<style type="text/css">
    /* These are comments, and are ignored by the browser
            . {dot} is the CSS selector for a class
            We are selecting all of the "a" elements inside of 
            the element with a class of "menu"
    */
    .menu a {
        background-image: url('link.gif');
        width: 100px;
    }

    /* :hover, :active, and :focus are all pseudo-selectors -- they select
            elements based on their state rather than based on their attributes
    */
    .menu a:hover, .menu a:active, menu a:focus {
        background-image: url('link_hover.gif');
    }
</style>

开始学习 HTML 和 CSS 的最佳地点之一是W3Schools。阅读他们的示例将使您牢牢掌握基础知识，然后浏览此处的HTML 和CSS 问题将使您对事物的工作方式有更深入的了解。祝你好运！

【讨论】：

【解决方案3】：

正如 Sean Vieira 所说，一种常见的方法是根据菜单标签的状态修改 HTML 标签的 CSS。

这可以像这样基本：

div.myimg：悬停{ 背景图像：url（p1.png）； } div.myimg { 背景图像：url（p2.png）； }

我的链接在这里

代码>

使用 JQuery 库中的 hover 函数也是可能的，而且难度不大。

【讨论】：

【解决方案4】：

这个概念一开始可能有点难以理解，但您基本上是将原始图像及其悬停状态（即，当链接悬停时您正在交换的图像）组合成一个图像，然后一次只显示该图像的适当部分作为锚元素上的定位背景图像。

这种方法有几个显着的好处：

通过将两张图片合二为一，您不再需要一个 HTTP 请求，从而提高了页面加载性能。
使用典型的 JavaScript 交换效果时，在用户将鼠标悬停在链接上之前，不会加载“悬停”图像。这会在加载/渲染中产生明显的延迟，这在视觉上很不协调。使用 CSS 精灵，两种图像状态会同时加载（它们是同一图像的一部分），因此悬停效果是即时的。
有些人（包括我自己）会争辩说，简单的悬停图像交换属于表现层 (CSS)，而不是行为层 (JavaScript)。这只是一种很好的做法，可以使代码更易于维护和理解。

当然，这假定您要切换的图像是链接图像本身，而不是当您将鼠标悬停在链接上时会发生变化的页面上的其他元素。这当然是可能的，但需要 JavaScript。

【讨论】：