Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.73/15: Рейтинг темы: голосов - 15, средняя оценка - 4.73
teklex
0 / 0 / 0
Регистрация: 25.12.2014
Сообщений: 3
1

Плавное выпадение :hover

25.12.2014, 13:21. Просмотров 3128. Ответов 5
Метки нет (Все метки)

Есть такой код:

CSS
1
2
3
4
5
6
7
#items .item a .info{
    display: none;
}
 
#items .item a .info:hover{
    display: block;
}
Можно ли реализовать плавное появление блоков при наведении средствами СSS? Если да, то подскажите, пожалуйста, как это можно сделать.
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
25.12.2014, 13:21
Ответы с готовыми решениями:

CSS. Плавное увеличение height через hover
Есть вот такой код CSS: .photo{height:220px; width:280px; margin-top:10px; ...

CSS (hover) отменить действие последнего hover на все элементы
Всем доброго времени суток. У меня следующая загвоздка: нашел скрипт для выпадающих меню. Подогнал...

Выпадение блока див
Добрый вечер, никак не могу решить проблему в подвале вот здесь http://musor-uborka.ru/landing/...

Inline-block и выпадение вниз
Добрый день! Периодически сталкиваюсь с таким поведением inline-блоков, когда один в конце или...

Выпадение из основного потока - пересечение
Здравствуйте! Сразу прилагаю код, а то уже 3 дня по вечерам бюсь об монитор головой и ничего...

5
SaumanBao
11 / 11 / 9
Регистрация: 24.12.2014
Сообщений: 39
25.12.2014, 14:17 2
Итак, свойства:
transition-property - указываем свойство, которое будем анимировать (можно указать несколько через запятую);
transition-duration - указываем время анимации (в секундах или миллисекундах);
transition-timing-function - указываем тип изменения;
или же можно все правила указать в одном свойстве:
transition - вписываем через пробел все правила.
Чтобы изменить цвет фона контейнера при наведении, пишем следующее:

CSS
1
2
3
4
5
6
7
8
9
.mycontainer {
background:#cccccc;
-webkit-transition-property:background;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
}
.mycontainer:hover {
background:#сс9999;
}
или упрощенная запись:

CSS
1
2
3
4
5
6
7
.mycontainer {
background:#cccccc;
-webkit-transition:background 1s linear;
}
.mycontainer:hover {
background:#сс9999;
}
Мы указали, что при наведении курсора на блок "mycontainer", будет изменятся цвета фона, время перехода с цвета на цвет - 1 секунда и тип изменения - линейная функция - "linear".
"transition-timing-function" имеет множество значений:
default
linear
ease-in
ease-out
ease-in-out
cubic-bezier (x1, y1, x2, y2)
0
teklex
0 / 0 / 0
Регистрация: 25.12.2014
Сообщений: 3
25.12.2014, 15:54  [ТС] 3
Для цвета фона и размеров (например height свойство trasition работает, а как реализовать это в случае когда необходимо плавно отобразить невидимый блок при наведении.
Попробовал вот такой вариант:
CSS
1
2
3
4
5
6
7
8
9
#mitem ul{height: 0px;
       -webkit-transition: height 1.4s;
       -moz-transition:  height 1.4s;
       -o-transition:  height 1.4s;
       transition:  height 1.4s
 }
 
#mitem:hover ul {
height: 150px;}
Только возникает проблема: transition не срабатывает при высоте 100% или auto, а содержимое каждого блока сильно различается по размеру.
0
Al_lord
38 / 38 / 26
Регистрация: 11.01.2014
Сообщений: 338
25.12.2014, 23:52 4
Логически подумайте, как вы наведете мишку на объект у которого нету высоты? Если вашу высоту сделать 0м, вы будете существовать?

Добавлено через 7 минут
Только возникает проблема: transition не срабатывает при высоте 100% или auto, а содержимое каждого блока сильно различается по размеру.
Если вы хотите увеличивать % то так и задавайте высоту в% как изначально так и после

CSS
1
2
3
4
5
6
7
8
9
#mitem ul{height: 0%;
       -webkit-transition: height 1.4s;
       -moz-transition:  height 1.4s;
       -o-transition:  height 1.4s;
       transition:  height 1.4s
 }
 
#mitem:hover ul {
height: 100%;}
сам сегодня мучился с этой фичей )
0
teklex
0 / 0 / 0
Регистрация: 25.12.2014
Сообщений: 3
26.12.2014, 14:03  [ТС] 5
Цитата Сообщение от Al_lord Посмотреть сообщение
Логически подумайте, как вы наведете мишку на объект у которого нету высоты? Если вашу высоту сделать 0м, вы будете существовать?
Высоты нет не у объекта у которого производится наведение, а у вложенного в него т.е. при наведении на #mitem происходит изменение размеров или отображение вложенного в этот блок списка.
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#mitem{
  position: relative;
  bottom: 10px;
  overflow: hidden;
  border-bottom: 1px solid #C3D9E4;
  border-top: 1px solid #EEF6F8;
  vertical-align: middle;
  font: 12px Arial;
  color: #3a859e;
  font-weight: bold;
  padding-top:10px;
  padding-bottom:10px;
  padding-left:55px;
}
 
#mitem ul{height: 0%;
       -webkit-transition: height 1.4s;
       -moz-transition:  height 1.4s;
       -o-transition:  height 1.4s;
       transition:  height 1.4s
 }
 
#mitem:hover ul {
height: 100%;}
Не могу понять почему, но вариант с процентами ни как не хочет работать.
0
Al_lord
38 / 38 / 26
Регистрация: 11.01.2014
Сообщений: 338
26.12.2014, 14:41 6
Кликните здесь для просмотра всего текста
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    #mitem{
  position: relative;
  bottom: 10px;
  overflow: hidden;
  border-bottom: 1px solid #C3D9E4;
  border-top: 1px solid #EEF6F8;
  vertical-align: middle;
  font: 12px Arial;
  color: #3a859e;
  font-weight: bold;
  padding-top:10px;
  padding-bottom:10px;
  padding-left:55px;
  height: 10px;
  
  -webkit-transition: all 3s ease-in-out;
    -moz-transition: all 3s ease-in-out;
    -o-transition: all 3s ease-in-out;
    transition: all 3s ease-in-out;
 
}
 
#mitem ul {
    
    height: 0px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    -webkit-transition: all 3s ease-in-out;
    -moz-transition: all 3s ease-in-out;
    -o-transition: all 3s ease-in-out;
    transition: all 3s ease-in-out;
    display: block;
 
 }
 
#mitem:hover ul {
        -webkit-transition: all 3s ease-in-out;
    -moz-transition: all 3s ease-in-out;
    -o-transition: all 3s ease-in-out;
    transition: all 3s ease-in-out;
height: 100%;
}
#mitem:hover
{
    height: 200px;
}
 
 
    </style>
</head>
<body>
<div id="mitem">
    <ul>
        <li>Элл</li>
        <li>Элл</li>
        <li>Элл</li>
 
    </ul>
</div>
 
    
</body>
</html>

Прикол в том что сам ul то увеличивается плавно, а блок в котором он находится - нет , значит блок mitem тоже нужно плавно увеличивать, но я бы сделал иначе, не давайте анимацию списку ul просто пускай блок mitem скрывает за собой список ul так вы не будете делать одно и тоже 2 раза
Кликните здесь для просмотра всего текста
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    #mitem{
  position: relative;
  bottom: 10px;
  overflow: hidden;
  border-bottom: 1px solid #C3D9E4;
  border-top: 1px solid #EEF6F8;
  vertical-align: middle;
  font: 12px Arial;
  color: #3a859e;
  font-weight: bold;
  padding-top:10px;
  padding-bottom:10px;
  padding-left:55px;
  height: 0px;
  
  -webkit-transition: all 3s ease-in-out;
    -moz-transition: all 3s ease-in-out;
    -o-transition: all 3s ease-in-out;
    transition: all 3s ease-in-out;
 
}
 
#mitem ul {
    
    height: 100%;
    padding: 0;
    margin: 0;
    display: block;
    margin-top: 10px;
 
 }
 
 
#mitem:hover
{
    height: 200px;
}
 
 
    </style>
</head>
<body>
<div id="mitem">
    <ul>
        <li>Элл</li>
        <li>Элл</li>
        <li>Элл</li>
 
    </ul>
</div>
 
    
</body>
</html>
0
26.12.2014, 14:41
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
26.12.2014, 14:41

Как по нажатию кнопки сделать выпадение случайных фраз?
Добрый день! Интересует возможность создания кнопки, при нажатии на которую, рядом происходит...

Плавное замена блоков при Hover
Приветствую! Помогите доработать jquery. при Hover на блок, Первый блок должен исчезать с стилем...

Нужно при клике, исключить события hover, во. И еще глюки .hover. Отключение .hover в случае активации .click
Нужно при клике, исключить события hover, во. И 1. Глюки .hover: При наведении на блок, к...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru