javascript - 使用 jquery 或 javascript 在悬停图像时更改 href 属性

Question

我想使用 jquery 或 javascript 转到此图像，然后将鼠标悬停在图像上，将 href attrb 更改为另一个 src 图像

这是代码:

<a href="Sign-Up.aspx" ><img alt="Login" src="images/login3.png" style="width: 173px; margin-top: 0px; z-index:10;" /></a>

Answer 1

首先，让我们给自己一个方法来从页面中的任何其他内容中识别这个 anchor /图像组合:

<a class="button" href="Sign-Up.aspx" ><img alt="Login"
  src="images/login3.png"
  style="width: 173px; margin-top: 0px; z-index:10;" /></a>

然后让我们编写一些 jQuery 来交换图像:

$('a.button img').mouseover(
    function() { $(this).attr('src', 'images/login3_hover.png'); }
);
$('a.button img').mouseout(
    function() { $(this).attr('src', 'images/login3.png'); }
);

第二位确保我们在不悬停时回到原始状态。

然而，您实际上并不需要 Javascript；您可以改为仅使用 CSS 和 HTML 来完成。为此，您必须将链接的文本和图像分开。类似于以下 HTML:

<a class='button' href="Sign-Up.aspx"><b>Login</b></a>

使用一些 CSS:

a.button {
    width: 173px;
    height: 73px; // or whatever your image height is
    position: relative;
    background-image: url("images/login3.png");
    background-position: top left;
    background-repeat: no-repeat;
    display: block;
}

a.button:hover {
    background-image: url("images/login3_hover.png");
}
a.button b {
    position: absolute;
    left: -9999px;
}

(我省略了 margin-top 和 z-index 规则，因为它们可能依赖于页面中发生的其他事情。)

我们所做的是将图像作为 CSS 背景图像附加到 anchor ，然后在我们将鼠标悬停在该 anchor 上时更改它。文本(之前位于图像的 alt 属性中)然后设置样式以使其不显示(但仍可用于搜索引擎和辅助工具)。

然而，这两种解决方案仍然存在问题，因为 images/login3_hover.png 图像在您悬停之前不会加载，因此无论背景如何，您都会得到一个简短的闪现 anchor 后面的颜色是它加载时的颜色。要解决这个问题，您需要使用 CSS sprites ，它建立在上面的 background-image 技术之上。