Хаки и Скрипты Next Generation CMS : CSS, Интерфейс : Абра катабра блок появись ....

irbees2008 Опубликовано - 9 - мая CSS

Адаптировал: 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;
}

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

Можешь почитать и вот эту статейку "Смотрим библиотеку GD"

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