CSS:图像链接，在鼠标悬停时改变

I have an image that is a link. I want to show a different image when the user hovers over the link.

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

Currently I'm using this code:

目前我正在使用这个代码:

<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');
}

But I'm having loads of problems: the div isn't picking up the CSS rules (the element just isn't showing the related CSS rules when I view it in Firebug).

但是我遇到了很多问题:div没有选择CSS规则(当我在Firebug中查看时，元素只是没有显示相关的CSS规则)。

Perhaps this is because (as I know) this is invalid HTML: you can't put an <a> around a <div>. However, if I switch to <span> then it seems I get bigger problems, because you can't set a height and width on a span reliably.

也许这是因为(正如我所知道的)这是无效的HTML:您不能在

周围放置。但是，如果我切换到，那么我就会遇到更大的问题，因为您不能可靠地设置一个span的高度和宽度。

Help! How can I do this better?

的帮助!我怎样才能做得更好?

8 个解决方案

#1

118

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

use a class for the link itself and forget the div

为链接本身使用一个类，并忘记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');
}

#2

If you have just a few places where you wish to create this effect, you can use the following html code that requires no css. Just insert it.

如果您希望创建这种效果，您可以使用以下不需要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>

Be sure to write the quote marks exactly as they are here, or it will not work.

一定要把引号写得和这里一模一样，否则就没用了。

#3

That could be done with <a> only:

这可以用来完成:

#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');
}

#4

It can be better if you set the a element in this way

这样设置a元素会更好

display:block;

and then by css sprites set your over background

然后通过css精灵设置你的背景。

Edit: check this example out http://jsfiddle.net/steweb/dTwtk/

编辑:查看这个示例http://jsfiddle.net/steweb/dTwtk/

#5

The problem with changing it via JavaScript or CSS is that if you have a slower connection, the image will take a second to change to the hovered version. This will cause an undesirable flash as one disappears while the other downloads.

通过JavaScript或CSS更改它的问题是，如果连接速度较慢，图像将需要一秒钟时间才能更改为悬浮版本。这将导致一个不受欢迎的flash消失而另一个下载。

What I've done before is have two images. Then hide and show each depending on the hover state. This will allow for a clean switch between the two images.

我之前做的是有两个图像。然后根据鼠标悬停状态隐藏并显示它们。这将允许在两个映像之间进行干净的切换。

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

#6

You could do the following, without needing CSS...

您可以执行以下操作，不需要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>

Example: https://jsfiddle.net/jord8on/k1zsfqyk/

例如:https://jsfiddle.net/jord8on/k1zsfqyk/

This solution was PERFECT for my needs! I found this solution here.

这个解决方案非常适合我的需要!我在这里找到了这个解。

Disclaimer: Having a solution that is possible without CSS is important to me because I design content on the Jive-x cloud community platform which does not give us access to global CSS.

免责声明:有一个没有CSS的解决方案对我来说很重要，因为我在Jive-x云社区平台上设计内容，它不允许我们访问全局CSS。

#7

If you give generally give a span the property display:block, it'll then behave like a div, i.e you can set width and height.

如果您通常给出一个span的属性显示:块，那么它就会像一个div, i。你可以设置宽度和高度。

You can also skip the div or span and just set the a the to display: block and apply the backgound style to it.

您还可以跳过div或span，只需将a设置为display: block并对其应用backgound样式。

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

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

#1

118

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