• 589
  • 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: нужны навыки css html

И так, о чём это я ? А вот о чём , попросил друг поправить кое что на сайте и ему надо было показать или скрыть блок при наведении на него. Вариантов много, есть и скрипты, и стили. Ну я склоняюсь в сторону стилей их и будем реализовывать.

И так приступим,есть у нас блок

Код:
<div class="blok">Text</div>
Теперь используя свойство transition будем изменять параметры этого блока при наведении :hover или клике :active.

Ну display: block, и при наведении display: none. Но так ничего не выйдет. Свойство transition может работать только с теми значениями, которые выражаются численно.

Так вот для решения нашей задачи нужно менять при наведении два свойства - прозрачность и высоту.
Код:
.blok:hover {
opacity:0;
height: 0px;
}
.blok {
-webkit-transition: opacity 2s, height 2s;
height: 30px;
background: blue;
color: white;
}


Смотрим, что у нас получилось. Точнее, наводим курсор на блок, а потом уже смотрим))

Можешь почитать и вот эту статейку "SPACEGALLERY - JQUERY PLUGIN"

mistakes

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

Ваше отношение к TWIG
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element