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

Тема в разделе "Верстка", создана пользователем Ahmad, 14 сен 2013.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. Ahmad

    Ahmad Постоялец

    Регистр.:
    4 май 2013
    Сообщения:
    86
    Симпатии:
    1
    У меня есть таблица вроде этого:

    <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`.

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

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

    Trusteg Создатель

    Регистр.:
    30 ноя 2012
    Сообщения:
    36
    Симпатии:
    11
  3. BDSG

    BDSG

    Регистр.:
    28 фев 2009
    Сообщения:
    203
    Симпатии:
    109
  4. Trusteg

    Trusteg Создатель

    Регистр.:
    30 ноя 2012
    Сообщения:
    36
    Симпатии:
    11
    Последнее редактирование: 15 сен 2013
  5. Ahmad

    Ahmad Постоялец

    Регистр.:
    4 май 2013
    Сообщения:
    86
    Симпатии:
    1
    Спасибо! Это похоже на работу, но почему там задержка с началом перехода при наведении указателя мыши на это? Существует небольшая задержка, после чего начинается переход. Можно ли это исправить, так что переход начинается сразу?
     
  6. BDSG

    BDSG

    Регистр.:
    28 фев 2009
    Сообщения:
    203
    Симпатии:
    109
    подгружается изображение.. тут либо загружать заранее (в скрытом виде или js'ом), либо делать спрайт (имхо это правильное решение)..
     
  7. Ahmad

    Ahmad Постоялец

    Регистр.:
    4 май 2013
    Сообщения:
    86
    Симпатии:
    1
    Нет, я не думаю, что это причина .. Загрузка изображений может произойти только один раз, и после этого перехода всегда должна быть быстрой, потому что изображения были загружены .. Я думаю, что это что-то другое причиной этого ..
     
  8. BDSG

    BDSG

    Регистр.:
    28 фев 2009
    Сообщения:
    203
    Симпатии:
    109
    тогда объясните, о каком именно переходе вы говорите - в коде (http://jsfiddle.net/Gywwm/10/) не ни одной якорной ссылки (a[href])..

    зы.. я имел в виду задержку появления красного изображения при первом наведении (до первого hover изображение http://i.imgur.com/K29T3Fw.png в dom, естественно, отсутствует)..
     
  9. Trusteg

    Trusteg Создатель

    Регистр.:
    30 ноя 2012
    Сообщения:
    36
    Симпатии:
    11
    http://jsfiddle.net/Gywwm/13/
    Я просто поставил свойство transition-delay на 0.5s, поэтому сразу изображение не менялось.
    P.S. If you want say thanks, u can press "I like"(Мне нравится) button.
     
    Ahmad нравится это.
  10. Ahmad

    Ahmad Постоялец

    Регистр.:
    4 май 2013
    Сообщения:
    86
    Симпатии:
    1

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

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