css - 悬停翻车情况

Question

这是我想要执行的功能的基本代码：

<style>

.cmaxx_rollover {
height: 279px;
width: 347px;
display: block;
background: url('http://imperialsystems.biz/imp/files/products/prod_cmaxx.png') bottom;
text-indent: -99999px;}

.cmaxx_rollover:hover {
background-position: 0 0;}

</style>

<a class="cmaxx_rollover" href="http://imperialsystems.biz/imp/products/cmaxx-dust-fume-cartridge-collector/"></a>

所以现在的问题是，我有一页大约有十几种产品，我需要这个悬停来处理。有没有比为每个产品创建一个新类更好的方法呢？或者我应该为每个产品创建 CSS 和类？

Answer 1

如果您只更改灰色矩形后面的阴影，您可以将其设置为所有产品的背景，并将具有透明背景的产品图像插入为 img，如下所示：

<div class="products">
<a href="..."><img src="cmaxx.png" alt="CMAXX"></a>
<a href="..."><img src="productx.png" alt="Product X"></a>
</div>

简约风格：

.products a {
    background: url(gray.png) bottom;
    width: 279px;
    width: 347px;
    display: block;
}

.products a:hover, .products a:focus {
    background-position: 0 0;
}

甚至更好的是你可以丢弃图像并使用CSS 渐变和阴影。

如果有不同的背景，您将不得不使用单独的类（可能使用部分共享的 css）。您还可以使用css sprites技术将图像制作成一张以保存 http 请求。

Answer 2

听起来，您只需要为每个项目赋予相同的类名，然后实现一次悬停行为。这就是真正需要的。所以给

class="cmaxx_rollover"

到每个产品并保持您的 CSS 原样，它将适用于所有产品。