3142
- 0
- Адаптировал: irbees2008
- Уровень сложности исполнения: нужны навыки css html
И так, о чём это я ? А вот о чём , попросил друг поправить кое что на сайте и ему надо было показать или скрыть блок при наведении на него. Вариантов много, есть и скрипты, и стили. Ну я склоняюсь в сторону стилей их и будем реализовывать.
И так приступим,есть у нас блок
Код:
<div class="blok">Text</div>
Ну display: block, и при наведении display: none. Но так ничего не выйдет. Свойство transition может работать только с теми значениями, которые выражаются численно.
Так вот для решения нашей задачи нужно менять при наведении два свойства - прозрачность и высоту.
Код:
.blok:hover {
opacity:0;
height: 0px;
}
.blok {
-webkit-transition: opacity 2s, height 2s;
height: 30px;
background: blue;
color: white;
}Смотрим, что у нас получилось. Точнее, наводим курсор на блок, а потом уже смотрим))
Можешь почитать и вот эту статейку "Добавляем к ссылкам и картинкам всплывающие подсказки Tooltips"
