Изменение стилей нескольких элементов

[SFproG]

Имеется код:

<style type="text/css">

.pic {width:150px; height:150px; display:block; background-image:url(1.png);}
.pic:hover img {opacity:0;}
.pic img {transition: opacity 0.5s ease-in-out;}

.zag {color:#000;}
.zag:hover {color:#666;}

</style>


<table border="0" cellspacing="0" cellpadding="10">
  <tr>
    <td><a href="#" class="pic"><img src="2.png" width="150" height="150" /></a></td>
    <td width="200">
      <div><a href="#" class="zag">ЗАГОЛОВОК</a></div>
      <div>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст </div>
    </td>
  </tr>
</table>

При наведении на картинку, она сменяется плавно на другую. При наведении на заголовок, он меняет цвет. Можно ли как-то средствами css сделать, чтобы при наведении на заголовок, картинка тоже менялась, и наоборот. Т.е. hover применялся сразу у двух элементов, при наведении на один из них.

(Знаю один способ, если сделать hover полностью на всю таблицу. Но он не подходит, нужно "наведение" конкретно на нужный элемент)

[npofopr]

Ну в вашем случае картинка далеко от заголовка.

У вас не получится. А так можно. Все от конкретного примера зависит.

Ну и не стал бы я делать такие сложные ховеры на css. Захотите вы потом сменить дизайн, элементы встанут по другой сетке. И все ховеры слетят.

На js как то надежнее

[SFproG]

убедили) на js сделал. Спасибо за ответ.