Question

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

Answer 1

是的，here是使用javascript的示例。

Answer 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这里的问题将让您更深入地了解事情的运作方式。祝你好运！

Answer 3

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

这可能是基本的：

<style>
div.myimg:hover   {
    background-image:url(p1.png);
}

div.myimg  {
    background-image:url(p2.png);
}
</style>

<div class="myimg">
<a href="#">my link here</a>
</div>
</code>

使用JQuery库中的hover函数也是可能的，而且没有太大困难。

Answer 4

我强烈建议使用CSS sprites：

http://www.alistapart.com/articles/sprites

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

这种方法有一些显着的好处：

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

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

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

4 个答案: