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

听起来，您只需要为每个项目指定相同的类名，然后执行一次悬停行为。这才是真正需要的。所以给出

class="cmaxx_rollover"

每个产品并按原样保留CSS，它将适用于所有产品。

Answer 2

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

<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 gradients和shadows。

如果存在不同的背景，则必须使用单独的类（可能具有部分共享的css）。您还可以使用css sprites技术将图像设置为一个以保存http请求。

悬停滚动情况

2 个答案: