Question

我有一个链接的图像。当用户将鼠标悬停在链接上时，我想显示不同的图像。

目前我正在使用此代码：

<a href="http://twitter.com/me" title="Twitter link">
<div id="twitterbird" class="sidebar-poster"></div></a>

div.sidebar-poster {
margin-bottom: 10px;
background-position: center top;
background-repeat: no-repeat;
width: 160px;
}
#twitterbird {
background-image: url('twitterbird.png');
}
#twitterbird:hover {
background-image: url('twitterbird_hover.png');
}

但是我遇到了很多问题：div没有采用CSS规则（当我在Firebug中查看时，该元素并没有显示相关的CSS规则）。

也许这是因为（据我所知）这是无效的HTML：你不能在<a>附近加<div>。但是，如果我切换到<span>，那么我似乎遇到了更大的问题，因为you can't set a height and width on a span reliably。

帮助！我怎样才能更好地做到这一点？

Answer 1

 <a href="http://twitter.com/me" class="twitterbird" title="Twitter link"></a>

使用一个类作为链接本身并忘记div

.twitterbird {
 margin-bottom: 10px;
 width: 160px;
 height:160px;
 display:block;
 background:transparent url('twitterbird.png') center top no-repeat;
}

.twitterbird:hover {
   background-image: url('twitterbird_hover.png');
}

Answer 2

如果您只想在几个地方创建此效果，则可以使用以下不需要css的html代码。只需插入即可。

<a href="TARGET URL GOES HERE"><img src="URL OF FIRST IMAGE GOES HERE" 
onmouseover="this.src='URL OF IMAGE ON HOVER GOES HERE'"
onmouseout="this.src='URL OF FIRST IMAGE GOES HERE AGAIN'" /></A>

请务必完全按原样编写引号，否则无效。

Answer 3

只能使用<a>：

#twitterbird {
 display: block; /* 'convert' <a> to <div> */
 margin-bottom: 10px;
 background-position: center top;
 background-repeat: no-repeat;
 width: 160px;
 height: 160px;
 background-image: url('twitterbird.png');
}
#twitterbird:hover {
 background-image: url('twitterbird_hover.png');
}

Answer 4

通过JavaScript或CSS更改它的问题是，如果您的连接速度较慢，则图像将需要一秒钟才能更改为悬停版本。当另一个下载时，这将导致不希望的闪光消失。

之前我所做的是有两张图片。然后根据悬停状态隐藏和显示每个。这样可以在两张图像之间进行干净的切换。

<a href="/settings">
    <img class="default" src="settings-default.svg"/>
    <img class="hover" src="settings-hover.svg"/>
    <span>Settings</span>
</a>

a img.hover {
    display: none;
}
a img.default {
    display: inherit;
}
a:hover img.hover {
    display: inherit;
}
a:hover img.default {
    display: none;
}

Answer 5

如果以这种方式设置a元素可能会更好

display:block;

然后按css sprites设置你的背景

修改：查看此示例http://jsfiddle.net/steweb/dTwtk/

Answer 6

您可以执行以下操作，而无需CSS ...

<a href="ENTER_DESTINATION_URL"><img src="URL_OF_FIRST_IMAGE_SOURCE" onmouseover="this.src='URL_OF_SECOND_IMAGE_SOURCE'" onmouseout="this.src='URL_OF_FIRST_IMAGE_SOURCE_AGAIN'" /></a>

示例：https://jsfiddle.net/jord8on/k1zsfqyk/

此解决方案完全符合我的需求！我找到了这个解决方案here。

免责声明： 拥有一个没有CSS的解决方案对我来说非常重要，因为我在Jive-x云社区平台上设计内容，而这些平台无法访问全局CSS。< / em>的

Answer 7

如果您通常给出span属性display:block，那么它的行为就像div，即您可以设置宽度和高度。

您也可以跳过div或span，只需将a设置为display: block，然后将背景样式应用到它。

<a href="" class="myImage"><!----></a>


    <style>
      .myImage {display: block; width: 160px; height: 20px; margin:0 0 10px 0; background: url(image.png) center top no-repeat;}
.myImage:hover{background-image(image_hover.png);}
    </style>

Answer 8

<!DOCTYPE html>
<html lang="en">
<head>
<title>Change Image on Hover in CSS</title>
<style type="text/css">
    .card {
        width: 130px;
        height: 195px;
        background: url("../images/pic.jpg") no-repeat;
        margin: 50px;
    }
    .card:hover {
        background: url("../images/anotherpic.jpg") no-repeat;
    }
</style>
</head>
<body>
    <div class="card"></div>
</body>
</html>

CSS：图片链接，悬停时更改

8 个答案: