Ситуация при наведении курсора

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

Если вы измените только тень за серым прямоугольником, вы можете установить его в качестве фона для всех продуктов и вставить изображения продуктов с прозрачным фоном, как показано ниже:

<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). Вы также можете сделать изображения в одно, чтобы сохранить http запросы, используя технику css sprites.

Answer 2

Судя по тому, как это звучит, вам просто нужно дать одно и то же имя класса каждому элементу, а затем один раз реализовать поведение при наведении курсора. Это все, что нужно на самом деле. Так дайте

class="cmaxx_rollover"

для каждого продукта и сохраните свой CSS как есть, и он будет работать на всех из них.