1

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

4

4 回答 4

1

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

于 2010-03-29T20:09:09.617 回答
1

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

这可能像这样基本：

<风格>
div.myimg：悬停{
    背景图像：url（p1.png）；
}

div.myimg {
    背景图像：url（p2.png）；
}
</style>

<div class="myimg">
<a href="#">我的链接在这里</a>
</div>
</代码>

使用JQuery 库中的悬停功能也是可能的，而且难度不大。

于 2010-03-29T20:27:35.223 回答
1

绝对地。如果您的代码如下所示：

<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>

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

于 2010-03-29T20:16:50.953 回答
0

我强烈推荐使用 CSS 精灵：

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

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

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

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

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

于 2010-03-30T07:43:16.147 回答