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

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

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


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

Можешь почитать и вот эту статейку "Настройка плагина breadcrumbs - "Хлебных крошек""

Опрос

Ваше мнение

Каким софтом вы пользуетесь?
Результаты

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

Теги

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

Статистика

  • Caйту: 3324 дня
  • Новостей: 542
  • Комменты: 254
  • Зарегистрированно : 571
  • Онлайн всего: [9]
  • Гости: [8]
  • Поисковики: [1] Яндекс
  • Были сегодня : [4] Яндекс, Google, selischev, irbees2008
  • SQL запросов: 20
  • Генерация страницы: 0.119сек
  • Потребление памяти: 4.893 Mb 
  •   яндекс.ћетрика