0

我试图在鼠标悬停时将一个图像更改为另一个图像。具体来说，当访问者将鼠标悬停在此上方时：

在此处输入图像描述

图像将变为：

在此处输入图像描述

当前代码

我想尽可能轻量级地做到这一点。但是图像背景 CSS 对我不起作用。我的代码如下：

<div id="featured-box-right"><a href="/videos/"  
target="_self"><img src="../images/box-featured-home-right.png" title="videos" 
alt="videos" width="300" height="150"></a></div>

但是当我对 CSS 执行此操作时：

#featured-box-right a:hover
{
background-image: url(../images/box-featured-home-right-hover.png); 
}

效果不对；这不是背景。这是一个真实的图像。任何关于我如何尽可能轻量级地实现这一目标的指导将不胜感激！

4

7 回答 7

2

轻量级的方法是使用CSS，并使用background-imagediv的属性：

jsFiddle

<div id="featured-box-right"></div>

CSS：

#featured-box-right {
    width: 300px;
    height: 150px;
    background-image: url('http://i.stack.imgur.com/OywDf.png'); 
}

#featured-box-right:hover {
    background-image: url('http://i.stack.imgur.com/aRJOk.png'); 
}
于 2013-02-24T03:56:22.690 回答
1

您应该使用 css 图像精灵技术，并且不要在此处使用 img 标签使用 css 背景属性。你应该试试下面的东西。您可以使用完全取决于您的类或身份或父子关系。

<div id="featured-box-right">
 <a href="/videos/" target="_self" id="img1"></a>
</div>

CSS：

#img1
{
    background: url(../images/box-featured-home-right.png); 
}

#img1:hover
{
  background: url(../images/box-featured-home-right-hover.png); 
}
于 2013-02-24T03:54:58.567 回答
1

完全删除<img/>标签并尝试这个 css。

#featured-box-right a {
  background-image: url(../images/box-featured-home-right.png); 
}
#featured-box-right a:hover {
  background-image: url(../images/box-featured-home-right-hover.png); 
}
于 2013-02-24T03:56:02.063 回答
1

CSS Sprites是一种技术，您可以使用 a background-image，设置宽度和高度，并调整背景位置以仅显示您需要显示的部分。通过这种方式，您可以使用单个图像并使用它显示许多不同的图形，从而节省server requests和加快page load时间：

HTML：

<img src="images/arrow-sprite.png" alt="arrow" class="clip pos-1" />

CSS：

.clip               { position: absolute; top: 0; left: 0; }

.pos-1              { clip:rect(0 48px 48px 0); }
.pos-2              { clip:rect(0 96px 48px 48px); left: -48px; }
.pos-3              { clip:rect(48px 48px 96px 0); top: -48px; }
.pos-4              { clip:rect(48px 96px 96px 48px); top: -48px; 
                      left: -48px; }

从这里取

于 2013-02-24T03:56:28.510 回答
1

您可以删除<img>标签并使用CSS背景iamge方法，但您需要将2张图片合二为一（一张在顶部，一张在底部）

接下来，您需要使用以下代码：

#featured-box-right {
    width: 300px;
    height: 150px;
    background-image: url(image url here) center top; 
}

#featured-box-right:hover {
    background-image: url(image url here) center bottom; 
}

使用此方法只需 1 张图片

于 2013-02-24T04:01:41.270 回答
1

不需要图像（背景或其他）。

结果只有两个图像组合的大小的 3.84%： http:
//fiddle.jshell.net/gWytK/show/：

<!doctype html>
<html>
	<头部>
		<标题></标题>
		<风格>
身体 {
	边距：8px；
}
#链接{
	列表样式：无；
	边距：0；
	填充：0；
	显示：块！重要；
	显示：内联块；
	溢出：隐藏；
}
#链接李{
	向左飘浮;
	宽度：300px；
	高度：150px；
	溢出：隐藏；
	背景：#000000；
	边框半径：20px；
}
#链接一个{
	显示：块；
	字体：粗体 30px/30px 'comic sans ms', sans-serif;
	填充：40px 66px 100px；
	颜色：#5496ff；
	文字装饰：无；
	文本转换：大写；
	文字阴影：0 0 100px #ffffff，0 0 100px #ffffff；
}
#链接一个：在{之后
	内容：'>>'；
}
#links a：悬停，
#链接一个：焦点{
	颜色：#1b1b1b；
	背景：#5496ff；
	文字阴影：无；
}
		</style>
	</head>
	<正文>
		<ul id="链接">
			<li>
				<a href="videos/">我们的视频收藏</a>
			</li>
		</ul>
	</正文>
</html>
于 2013-02-24T04:58:41.077 回答
0

CSS 中没有image属性。为了获得所需的效果，您应该将其替换为并从您的 HTML 代码中background-image删除该标记。img

#featured-box-right
{
  background-image: url(../images/box-featured-home-right.png); 
}

#featured-box-right:hover
{
  background-image: url(../images/box-featured-home-right-hover.png); 
}
于 2013-02-24T03:55:06.370 回答