Можно ли объединить несколько классов?
 

У меня есть картинка, которая оформляется с помощью нескольких классов. выглядит это так:

<span class='products'><a href='/".$str_menu['menu_url']."/".$str_kat['kat_url'].".html'>
<span class='products_text_fon'></span>
<span class='products_text'>".$str_kat['kat_name']."</span>
<img src='/img/".$str_kat['kat_foto'].".jpg' alt='".$str_kat['kat_name']."' class='products_foto' />
</a></span>

Мне нужно, чтобы при наведении мыши у трех классов изменились цвета, но дело в том, что в одном классе это текст, в другом - контур, и они изменяются только при наведении на каждый, а мне нужно, чтобы они изменялись одновременно при наведении на главный класс. Это возможно сделать с помощью стилей? Можно их как-то объединить? Или может как-то по-другому можно?
Заранее спасибо!!

Попробовала, что-то не получается.
Как в таком случае должны выглядеть названия самих стилей.
У меня вот так:
.products {}
.products_text_fon{}
.products_text{}

zazula, :blink:

<style>
.products:hover{cursor:pointer}
.products:hover .products_text_fon{background:red;color:white}
.products:hover .products_text{color:red}
.products:hover .products_foto{outline:1px solid red}
</style>

<span class="products">
	<span class="products_text_fon">Фон</span>
	<span class="products_text">Текст</span>
	<span class="products_foto">Фото</span>
</span>

все получилось, просто изначально не поставила пробел между hover и стилем. огромное спасибо!!!!