CSS：图像链接，悬停时更改答案

【问题标题】：CSS: image link, change on hoverCSS：图像链接，悬停时更改
【发布时间】：2011-06-10 16:01:45
【问题描述】：

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

目前我正在使用此代码：

<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：您不能在 <div> 周围放置 <a>。但是，如果我切换到<span>，那么我似乎会遇到更大的问题，因为you can't set a height and width on a span reliably。

帮助！我怎样才能做得更好？

【问题讨论】：

实际上我认为现在将<a> 放在<div> 周围是允许的。
哦，好吧...在那种情况下，知道为什么 CSS 没有被拾取吗？我认为如果我在元素上使用 id 并在 CSS 中使用 # ，它总是会选择它。
如果您使用的是 HTML5 文档类型，则块级链接很好。 html5doctor.com/block-level-links-in-html-5
您使用的是什么文档类型？在html5 a elements can contain block level elements.

标签： html css

【解决方案1】：

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

【讨论】：

不错的简单解决方案。

【解决方案2】：

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

【讨论】：

【解决方案3】：

您可以在不需要 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。

【讨论】：

【解决方案4】：

如果您希望创建此效果的地方只有几个，您可以使用以下不需要 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>

请务必按照此处的原样写引号，否则将不起作用。

【讨论】：

我已经尝试过了，它是假设的。我知道这是 JavaScript ......你能否让我知道如何使用 CSS 来完成。如果可能的话，我需要以实际代码为例。

【解决方案5】：

这样设置a元素会更好

display:block;

然后通过css sprites 设置您的背景

编辑：查看此示例http://jsfiddle.net/steweb/dTwtk/

【讨论】：

谢谢 - 一旦我弄清楚如何让元素本身以非零宽度显示，我将使用精灵。
如果你设置了 display:block，你应该为元素设置一个固定的宽度/高度;)
另外，看看这个例子jsfiddle.net/steweb/dTwtk ..它会帮助你;）

【解决方案6】：

这只能通过<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');
}

【讨论】：

你的意思是<a href="" id="twitterbird"></a>？不幸的是，它在 Chrome 中以 0 的宽度和高度呈现（即使使用您建议的 CSS 类）。
好的，如果我尝试仅显示您的建议的测试页面...那么为什么我的“真实”页面上的高度和宽度都为 0？我试过设置height: 160px ! important，但没有帮助......
...解释一下：在 Chrome 开发者工具中，上面的所有样式都显示在“匹配规则”下，但是在“计算样式”部分，高度和宽度为零！没有明显的原因。为什么？
我为此创建了一个新问题：stackoverflow.com/questions/4717673/…

【解决方案7】：

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

【讨论】：

由于图片是按需下载的，所以第一次访问页面，悬停后会有一瞬间没有图片。只是想指出这一点，因为这对某些人来说可能是不受欢迎的。

【解决方案8】：

如果您通常给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>

【讨论】：