• 517
  • 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;
}


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

Можешь почитать и вот эту статейку "Быстрый вывод чекбоксов xfields"

mistakes

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

Ваше мнение

Какие темы вам интереснее?
Результаты

----