0

私がやりたい機能の基本的なコードは次のとおりです。

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

さて、質問ですが、このホバーで作業する必要がある約12個の製品のページがあります。製品ごとに新しいクラスを作成するよりも良い方法はありますか? それとも、製品ごとに CSS とクラスを作成するだけですか?

4

2 に答える 2

0

灰色の四角形の背後にある影のみを変更する場合は、すべての製品の背景として設定し、次のように 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 スプライトテクニックを使用して、画像を 1 つにまとめて http リクエストを保存することもできます。

于 2013-07-25T16:03:19.957 に答える
0

おっしゃる通り、各項目に同じクラス名を付けて、ホバー動作を 1 回実装するだけです。本当に必要なのはそれだけです。だから与える

class="cmaxx_rollover"

CSS をそのままにしておくと、すべての製品で機能します。

于 2013-07-25T14:56:29.357 に答える