Подскажите, как решить проблему!

Автор Тема: Подскажите, как решить проблему!  (Прочитано 1856 раз)

Оффлайн das07Автор темы

  • Бизнес оценка: (0)
  • Постоялец
  • ***
  • СПАСИБО: 6
  • Сообщений: 148
  • Карма: 1

Оффлайн das07Автор темы

  • Постоялец
  • ***
Здравствуйте, подскажите как и каким методом решить задачу!
Разрабатываю новый дизайн для сайта, вот сам дизайн - mrindex.ru, хочу, чтобы при наведении курсора мыши на ссылку, например, части речи, внизу появлялся скрытый текст "Пройти тест", а ссылка, которая идет немного ниже сдвигалась вниз, тем самым открывала пространство для ссылки "пройти тест". Скажите пожалуйста каким методом это сделать и очень подробно пожалуйста! Заранее благодарен!


Оффлайн Kylaksizov

  • Бизнес оценка: (2, 100%)
  • Старожил
  • ****
  • СПАСИБО: 121
  • Сообщений: 389
  • Карма: 24
  • Пол: Мужской
  • Владимир Кулаксизов
    • Создание сайтов

Оффлайн Kylaksizov

  • Старожил
  • ****
Re: Подскажите, как решить проблему!
« Ответ #1 : 27-10-2012, 11:47:10 »
Знаю что можно с помощью простого css3, но забыл ;D
Обратись к ---. Если он свободен, то подскажет.


Оффлайн Clever

  • Бизнес оценка: (7, 100%)
  • Ветеран
  • *****
  • СПАСИБО: 494
  • Сообщений: 965
  • Карма: 87
  • Пол: Мужской
  • Награды КМС поисковой оптимизации

Оффлайн Clever

  • Ветеран
  • *****
Re: Подскажите, как решить проблему!
« Ответ #2 : 27-10-2012, 15:59:31 »
Все не так сложно как могло бы показаться .  Берем кусочек кода с вашегос сайта:
Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.Итак , как я понял задача чтобы каждый из пунктов ссылок (в данном коде их три) при наведении вызывал свою кнопку , при нажатии на которую ...    в общем что будет при нажатии , дело другой темы , а здесь автор топика просит помочь с появлением кнопок при наведении.
Постараемся обойтись без скриптов .
Для этого нужно обернуть все что находится между <h5></h5> в контейнер , допустим пусть это будет <div></div> , и туда же добавить кнопку пройти тест. Выглядеть это будет так:

Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.Для наглядности я на кнопку повесил событие onclick , потом его можно убрать , это для примера.

И теперь остается поработать со стилями , чтобы визуально был один вид , а при наведении другой (появлялась кнопка)
Допустим так:
Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.Свойство transition не обязательное здесь , но оно дает плавное открытие блока.

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

Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.
Посмотреть в действии можно в моем обновленном редакторе , так как данный код писал я , на коленке как говорят , находу. Смотреть

Оффлайн Kylaksizov

  • Бизнес оценка: (2, 100%)
  • Старожил
  • ****
  • СПАСИБО: 121
  • Сообщений: 389
  • Карма: 24
  • Пол: Мужской
  • Владимир Кулаксизов
    • Создание сайтов

Оффлайн Kylaksizov

  • Старожил
  • ****
Re: Подскажите, как решить проблему!
« Ответ #3 : 27-10-2012, 16:46:08 »
Да прикольные вещи можно делать с помощью css3 8)

Оффлайн das07Автор темы

  • Бизнес оценка: (0)
  • Постоялец
  • ***
  • СПАСИБО: 6
  • Сообщений: 148
  • Карма: 1

Оффлайн das07Автор темы

  • Постоялец
  • ***
Re: Подскажите, как решить проблему!
« Ответ #4 : 27-10-2012, 17:09:27 »
Огромное вам спасибо! Есть же хорошие люди!!!


Оффлайн Clever

  • Бизнес оценка: (7, 100%)
  • Ветеран
  • *****
  • СПАСИБО: 494
  • Сообщений: 965
  • Карма: 87
  • Пол: Мужской
  • Награды КМС поисковой оптимизации

Оффлайн Clever

  • Ветеран
  • *****
Re: Подскажите, как решить проблему!
« Ответ #5 : 27-10-2012, 21:15:58 »
Всегда рад помочь если есть время  :)


 

Похожие темы