Хаки и Скрипты Next Generation CMS

Абра катабра блок появись ....

irbees2008 irbees2008 Опубликовано - 9 - мая CSS
1695 - 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;
}


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

Можешь почитать и вот эту статейку "Стильная пагинация"

Опрос

Ваше мнение

какой форум лучше для вас
Результаты

Последние комментарии

Теги

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

Статистика

  • Caйту: 3458 дней
  • Новостей: 553
  • Комменты: 254
  • Зарегистрированно : 583
  • Онлайн всего: [5]
  • Гости: [5]
  • SQL запросов: 19
  • Генерация страницы: 0.41сек
  • Потребление памяти: 5.100 Mb 
  •   яндекс.ћетрика