0

我有一个网站，主页上有两个新闻项目。他们都有相同的图像，所以人们可以点击阅读更多。所以所有标准的东西。现在，我有一个问题。如上所述，这两个图像是相同的精灵，并且在它们位于不同的文章下方时是分开的，这也是合乎逻辑的。现在，我想在两个图像上创建相同的效果。如果两者都悬停，则必须更改为不同的精灵，但现在不会发生。在一个精灵上，它的位置很好（所以看起来颜色发生了变化，技术人员无法理解它是图像），但在另一个精灵上，悬停的精灵将自身定位在阅读更多按钮上方。 .

我怎样才能使这两个均匀，以便它们正确定位而不是高于或低于阅读更多图像？

CSS：

.home article {
    background: url("images/readmore.png") no-repeat scroll left 250px transparent;
    float: left;
    padding: 15px 15px 45px;
    width: 300px;
}

.home article .readmore:hover {
    background: url("images/icon-readmore-sprite.png") no-repeat scroll 5px 3px transparent;
}

的HTML：

<article>
    <div class="entry-content">
    <a rel="bookmark" title="..." href="....">
    <p>......</p>
    <span class="readmore" title="read">read further</span>
    </a>
    </div>
</article>

PS：如果我这样做：

.home article:hover {
    background: url("images/icon-readmore-sprite.png") no-repeat scroll 5px 3px transparent;
background-position: 340px 250px;
}

然后它会正确定位，但如果我悬停，它看起来就像被点击了。它向左和向下，就像点击一个按钮......

4

2 回答 2

1

您必须了解 CSS sprites 方法的基础知识。

你应该遵循这个例子

http://www.24development.cz/examples/css-sprites/sprite.html

请查看源代码并根据您的图像数据移动图像精灵位置。

这也可以帮助您避免预加载所有图像的问题。

让我知道这是否适合您。

于 2012-10-09T11:35:56.970 回答
0

据我所知，这就是你所需要的。使用一个小的 32x32 图像（或任何尺寸）并将其放置在右下角。

article a {
    display: block;
    background: grey url('small.png') bottom right no-repeat;
}

article a:hover {
    background: red url('small-hover.png') bottom right no-repeat;
}
于 2012-10-09T11:48:10.103 回答