Question

我在img标记内有一个a。当鼠标悬停在a上时，我想要更改图片网址。可以使用CSS吗？

<a  href="#"><img  src="img/takipet.png" alt=""></a>

Answer 1

要直接回答您的问题，这是一种仅限CSS的方法：

HTML：

<div id="the-image-wrapper">
  <img id="image-main" src="some/src">
  <img id="image-alternate" src="some/other/src">
</div>

CSS：

#image-alternate {display: none;}
#the-image-wrapper:hover #image-main {display: none;}
#the-image-wrapper:hover #image-alternate {display: inline;}

然而，您最好尝试使用替代方法，例如使用背景图像。当然，这实际上取决于应用程序。

如果您要使用背景图片路线，则应take a look at using sprites。

Answer 2

如果是背景图片，您可以这样做：

.element:hover{
    background-image:url(bg.jpg);
}

甚至

.element:hover a{
    background-image:url(bg.jpg);
}

如果a标记位于其他内容中。

Answer 3

你几乎没有办法做到这一点。

如果您更喜欢使用css，则应使用 background-image 属性

替换

a.some_class{
  background-image:url(your_image_url);
  background-repeat: no-repeat;
  display: block;      
  height:image_height;
  width:image_width;
}

a.some_class:hover{
   background-image:url(your_image_url2);
}

此外，您可以使用Div包裹的两张图像。在div悬停时需要显示/隐藏。

使用jQuery

$('a img.your_img_class').mouseover(function () {
    $(this).attr("src", "hover_1_src");
})
.mouseout(function () {
    $(this).attr("src", "old_src");
});

Answer 4

使用CSS无法更改src=""属性。只需使用Javascript或Jquery进行更改你可以通过CSS控制风格。
创建Div元素并为其设置背景图像。

HTML Css：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
#MyDiv{
    width:100%;
    height:100%;
    background-image: url('Image.jpg');
}
#MyDiv:hover{
background-image: url('NewImage.jpg');
}
</style>
</head>
<body>
    <div id="MyDiv" > </div>
</body>
</html>

Html Javascript：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <img src="http://codeorigin.jquery.com/jquery-wp-content/themes/jquery/images/logo-jquery.png" onmouseover="this.src='http://www.google.com/images/srpr/logo11w.png';" >
</body>
</html>

如何在悬停时更改'a'标记内的img？

4 个答案: