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

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

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

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

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

 

Разметка HTML

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

Все просто, никаких особенностей.

 

CSS 

И формируем стили для нашего эффекта. Все также просто и результативно.

.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;
    }

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/bDxTppuksBo/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Twitter эффект при навдении курсора мыши на блок | | 2012-10-05 01:03:02 | | Статьи Web-мастеру | | В данном уроке мы продемонстрируем технику CSS, которую можно использовать для формирования эффекта hover для группы элементов div и дополнительного выделения выбранного пункта внутри блока.Twitter | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: