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

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем Styler247, 14 сен 2013.

  1. Styler247

    Styler247

    Регистрация:
    16 май 2013
    Сообщения:
    87
    Симпатии:
    2
    У меня есть таблица вроде этого:

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

    Styler247

    Регистрация:
    16 май 2013
    Сообщения:
    87
    Симпатии:
    2
    Может ли кто-нибудь помочь мне с этим?
     
  3. alex_storm

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.120
    Симпатии:
    559
    table.tableA:hover{
    bakcground:red;
    }
     
  4. Styler247

    Styler247

    Регистрация:
    16 май 2013
    Сообщения:
    87
    Симпатии:
    2
  5. alex_storm

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.120
    Симпатии:
    559
    Прошу прощения, опечатался.

    table.tableA:hover {
    background:red;

    }
     
  6. Styler247

    Styler247

    Регистрация:
    16 май 2013
    Сообщения:
    87
    Симпатии:
    2
  7. alex_storm

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.120
    Симпатии:
    559
  8. Styler247

    Styler247

    Регистрация:
    16 май 2013
    Сообщения:
    87
    Симпатии:
    2
    Тем не менее не работает для меня ..
     
  9. alex_storm

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.120
    Симпатии:
    559
    Правильно нужно прописать tableA:hover - пробелов быть не должно!
    У Вас же пробел tableA:_hover
    Поэтому и не работает.
     
  10. Styler247

    Styler247

    Регистрация:
    16 май 2013
    Сообщения:
    87
    Симпатии:
    2

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

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

    [​IMG]


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


    [​IMG]


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

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

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

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

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.120
    Симпатии:
    559
    table.tableA:hover span{
    color:red;
    }

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

    Styler247

    Регистрация:
    16 май 2013
    Сообщения:
    87
    Симпатии:
    2
    Алекс, я пытаюсь задать свои вопросы так же ясно, как я могу, но все же я прошу прощения за причиненные неудобства.

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

    Dmitry007

    Регистрация:
    15 сен 2013
    Сообщения:
    9
    Симпатии:
    0
    Вам обязательно через CSS и transitions? А то проще по моему через javascript
     
  14. Styler247

    Styler247

    Регистрация:
    16 май 2013
    Сообщения:
    87
    Симпатии:
    2
    Я не думаю, JavaScript необходим для такой простой задачи. CSS отдельно, должно быть в состоянии сделать это.

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

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.120
    Симпатии:
    559
    Для изображения лучше использовать спрайт. Т.е. соединить два изображения в одно.
    И при наведении менять 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;
    }

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

    Dmitry007

    Регистрация:
    15 сен 2013
    Сообщения:
    9
    Симпатии:
    0
    ну и эффект транзишн, наример
    table.tableA:hover{
    color:red;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
    transition: all 1s;
    }
     
  17. Styler247

    Styler247

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

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

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

    http://css-tricks.com/examples/FadeImageWithSprite/
    --- Добавлено, 17 сен 2013 ---
    Спасибо, но переход происходит, только когда мышь идет в верхней части таблицы HTML. Так не бывает, когда мышь уходит.

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

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

    Dmitry007

    Регистрация:
    15 сен 2013
    Сообщения:
    9
    Симпатии:
    0
    Сделайте обе синие картинки в одну общую и положите в 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;
    }
     
  19. VittMan

    VittMan

    Регистрация:
    23 авг 2013
    Сообщения:
    5
    Симпатии:
    0
    Последнее редактирование: 17 окт 2013