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

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

<div class="footer_row_3">
<table class="tableA">
<tr>
<td><img class="popcorn" src="http://i.imgur.com/HUjq2Va.png"></td>
<td><span class="statement">Lorem Ipsum</span></td>
<td><img class="popcorn" src="http://i.imgur.com/HUjq2Va.png"></td>
</tr>
</table>
</div>

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

1) Popcorn изображения изменится на это изображение: http://i.imgur.com/K29T3Fw.png
2) цвет текста меняется на красный.

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

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

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

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

 

Может ли кто-нибудь помочь мне с этим?

 

table.tableA:hover{
bakcground:red;
}

 

Пробовал. Ничего не делает:

http://codepen.io/anon/pen/mqldJ

 

Прошу прощения, опечатался.

table.tableA:hover {
background:red;

}

 

Прежнему не работает: http://codepen.io/anon/pen/mqldJ

 

Да ладно ?? )) http://codepen.io/anon/pen/mqldJ

 

Тем не менее не работает для меня ..

 

Правильно нужно прописать tableA:hover - пробелов быть не должно!
У Вас же пробел tableA:_hover
Поэтому и не работает.

 

У меня он работает. Но я думаю, что вы не понимаете мой вопрос.

Это то, что я получаю от вашего кода:




Это то, что я должен выполнять при наведении указателя мыши на таблицу:





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

1) попкорн изображения изменится на это изображение: http://i.imgur.com/K29T3Fw.png
2) цвет текста меняется на красный.

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

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

 

table.tableA:hover span{
color:red;
}

Задавайте правильные вопросы и получите правильные ответы)

 

Алекс, я пытаюсь задать свои вопросы так же ясно, как я могу, но все же я прошу прощения за причиненные неудобства.

Текст теперь меняет цвет, но изображение не меняется.

 

Вам обязательно через CSS и transitions? А то проще по моему через javascript

 

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

Пример: http://css-tricks.com/examples/FadeImageWithSprite/

 

Для изображения лучше использовать спрайт. Т.е. соединить два изображения в одно.
И при наведении менять background-position.
Например:
<div class="tableA">
<span> Lorem</span>
</div>

.tableA{
background:url(image/bg.png) no-repeat 0 0;
height:50px;
width:80px;
}
.tableA:hover, .tableA:hover span{
background-position:0 - 50px;
color:red;
}

Вот таким образом можно создать нужное для Вас.

 

ну и эффект транзишн, наример
table.tableA:hover{
color:red;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-ms-transition: all 1s;
transition: all 1s;
}

 

Ваш ответ будет работать, технически. Но мой переход требования не будут выполнены в этом. Если я буду использовать спрайт, и я использую `transition: background-position`, это приведет в скользящем переходе, а не 'исчезать' переходный период, который я хочу.

Я надеюсь, вы поняли, что я имел в виду.

Это то, что я хочу (наведите курсор на иконку, чтобы увидеть переход):

http://css-tricks.com/examples/FadeImageWithSprite/

--- Добавлено, 17 сен 2013 ---

Спасибо, но переход происходит, только когда мышь идет в верхней части таблицы HTML. Так не бывает, когда мышь уходит.

Кроме того, изображения не изменится. Мне нужно изменить изображение тоже, когда указатель мыши находится над HTML таблице.

http://codepen.io/anon/pen/mqldJ

 

Сделайте обе синие картинки в одну общую и положите в tableA задним фоном. А затем в hover меняйте на одну общую красную.
Типа:

.tableA{
background:url(image/blue.png) no-repeat 0 0;
height:50px;
width:150px;
}
.tableA:hover{
color:red;
background:url(image/red.png) no-repeat 0 0;
}

 

http://jsfiddle.net/Qv9z3/2/ Настрой под себя.