Измените содержимое таблицы при наведении мыши?

[Ahmad]

У меня есть таблица вроде этого:

<div class="footer_row_3">
<table class="tableA">
<tr>
<td><img class="popcorn" src="Для просмотра ссылки Войди или Зарегистрируйся"></td>
<td><span class="statement">Lorem Ipsum</span></td>
<td><img class="popcorn" src="Для просмотра ссылки Войди или Зарегистрируйся"></td>
</tr>
</table>
</div>

То, что я хочу сделать, это, что, когда указатель мыши находится над `tableA` в любом месте в пределах `tableA`, следующие два изменения происходят:

1) Popcorn изображения изменится на это изображение: Для просмотра ссылки Войди или Зарегистрируйся
2) цвет текста меняется на красный.

Кроме того, он должен иметь в стиле 'исчезать' CSS `transition`. Чтобы создать эффект, что один набор "исчезает" в другой.

Кроме того, обе упомянутые выше изменения должны происходить при наведении `tableA` из любого места в пределах `tableA`.

Я знаю, как индивидуально изменить текст и изображения при наведении курсора мыши, но я не знаю, как это сделать вместе для нескольких элементов.

Как я могу добиться этого эффекта?

 

[Trusteg]

jsfiddle?

 

[BDSG]

Для просмотра ссылки Войди или Зарегистрируйся

 

[Trusteg]

Для просмотра ссылки Войди или Зарегистрируйся[/URL]

 

[Ahmad]

Для просмотра ссылки Войди или Зарегистрируйся

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

 

[BDSG]

подгружается изображение.. тут либо загружать заранее (в скрытом виде или js'ом), либо делать спрайт (имхо это правильное решение)..

 

[Ahmad]

подгружается изображение.. тут либо загружать заранее (в скрытом виде или js'ом), либо делать спрайт (имхо это правильное решение)..

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

 

[BDSG]

тогда объясните, о каком именно переходе вы говорите - в коде (Для просмотра ссылки Войди или Зарегистрируйся) не ни одной якорной ссылки (a[href])..

зы.. я имел в виду задержку появления красного изображения при первом наведении (до первого hover изображение Для просмотра ссылки Войди или Зарегистрируйся в dom, естественно, отсутствует)..

 

[Trusteg]

Для просмотра ссылки Войди или Зарегистрируйся
Я просто поставил свойство transition-delay на 0.5s, поэтому сразу изображение не менялось.
P.S. If you want say thanks, u can press "I like"(Мне нравится) button.

 

[Ahmad]

Для просмотра ссылки Войди или Зарегистрируйся
Я просто поставил свойство transition-delay на 0.5s, поэтому сразу изображение не менялось.
P.S. If you want say thanks, u can press "I like"(Мне нравится) button.

Лучше сейчас. Но сейчас проблема в том, что переход изображения и текст не синхронизируются должным образом.

При наведении указателя мыши на таблицу, изображение меняется немного раньше. И когда мышь уходит, текст изменения, прежде чем.