Главная » Для web-мастера » HTML

Twitter эффект при наведении курсора мыши на блок


Полезный hover эффект, который можно использовать для формирования элементов div и дополнительного выделения выбранного пункта внутри блока.

Пример данного решения использует twitter, для вывода ссылок при просмотре твита. Когда курсор мыши наводится на твит, появляются ссылки для формирования ответа, ретвита и добавления в избранное:

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


Мы создадим такой же эффект. При наведении курсора на блок, будут выводиться дополнительные ссылки, а при выделении определенной ссылки, она будет получать подчеркивание.

Разметка HTML
Код
<section class="parent">
  <p>Секция №1</p>
  <br>
  <div class="child">Поделиться</div>
  <div class="child">Нравится</div>
  <div class="child">Твитнуть</div>
</section>


И формируем стили для нашего эффекта. Все также просто и результативно.
Код
.parent {
  width: 400px;
  height: 100px;
  background: #fff;
  border: 2px solid #000;
  margin: 10px;
  }
.child {
  opacity: 0;
  color: #000;
  margin-left: 10px;
  float: right;
  }
.child:hover {
  opacity: 1.0;
  text-decoration: underline;
  cursor: pointer;
  }
.parent:hover > .child {
  opacity: 1.0;
  }


Готово.


Источник |  Категория: HTML | Добавил: AID | Дата: 27.03.2013
Скачать Twitter эффект при наведении курсора мыши на блок с сервера
2904_demo_1557.zip Размер: 1.2 Kb (cкачиваний: 112)
Посмотреть демо Twitter эффект при наведении курсора мыши на блок
Twitter эффект при наведении курсора мыши на блок(посмотрели: 1221)

Другие новости

Поделиться ссылкой

Ссылка:
BB-code:
HTML:
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Хостинг от uCoz