Картинка поднимается при наведении курсора и остается на месте

@dimoncheg · Регистрация: 18.10.2012

Студворк — интернет-сервис помощи студентам

И снова здравствуйте. Прошу помощи в анимации. Есть картинка, изначально ей дан margin-top, чтобы она была внизу. Нужно, чтобы при наведении курсора картинка поднялась до margin-top: 0px и после того, как я убрал курсор с нее она осталась на своем месте, т.е не опустилась обратно вниз. Вот у меня почему-то не выходит, может перетрудился и голова не соображает уже?

Пробовал по-разному. Заранее спасибо за помощь.

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
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
#logo {
cursor: pointer;
margin-top: 130px;
margin-left: 10px;
position: absolute;
}
 
#logo:hover {
cursor: pointer;
margin-top: 0px;
position: absolute;
 
-webkit-animation: logos 1s linear 1;
-moz-animation: logos 1s linear 1;
-ms-animation: logos 1s linear 1;
-o-animation: logos 1s linear 1;
animation: logos 1s linear 1;
}
 
///////////////////////////
 
@-webkit-keyframes logos {
        
     0% { margin-top: 130px; }
 
     50% { margin-top: 0px; }
 
 
     100% { margin-top: 0px; }
 
    
} 
@-moz-keyframes logos {
     
      0% { margin-top: 130px; }
 
     50% { margin-top: 0px; }
 
     100% { margin-top: 0px; }
 
 
    }
}
@-o-keyframes logos {
     
     0% { margin-top: 130px; }
 
     50% { margin-top: 0px; }
 
     100% { margin-top: 0px; }
      
    }
 
@keyframes logos {
     
      0% { margin-top: 130px; }
 
     50% { margin-top: 0px; }
 
     100% { margin-top: 0px; }
 
      
    }

HTML5
1
<img src="logo.png" id="logo">

@Shakalaka · 18.04.2015, 21:27

position:absolute тут при чем?

@Lazy_Den · 18.04.2015, 22:15

dimoncheg, даже не знаю, можно ли это решить только с помощью CSS. А вот если к делу подключить JS, то задача достаточно простая:

CSS
1
2
3
4
5
6
7
8
9
10
#logo {
    cursor: pointer;
    margin-top: 130px;
    margin-left: 10px;
    -webkit-transition: margin-top 1s linear;
    transition: margin-top 1s linear;
}
#logo.up {
    margin-top: 0;
}

JavaScript
1
2
3
document.getElementById('logo').addEventListener('mouseenter', function(){
    this.classList.add('up');
}, false);

@dimoncheg · 19.04.2015, 08:49 **[ТС]**

Shakalaka, при том, что этот элемент должен находиться за другим элементом.

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

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<title>Dream Time</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="style.css" rel="stylesheet">
 
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<script src="jquery.js" type="text/javascript"></script>
 
 
<script type="text/javascript">
document.getElementById('logo').addEventListener('mouseenter', function(){
    this.classList.add('up');
}, false);
</script>
 
</head>
 
<body>
 
<img src="logo.png" id="logo">
 
 
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
#logo {
    cursor: pointer;
    margin-top: 130px;
    margin-left: 10px;
    -webkit-transition: margin-top 1s linear;
    transition: margin-top 1s linear;
}
#logo.up {
    margin-top: 0;
}

Добавлено через 1 час 11 минут
Все, разобрался, всем большое спасибо, скрипт не туда пихал.

Новые блоги и статьи Все статьи Все блоги /
Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .

@Shakalaka 653 / 556 / 322 Регистрация: 27.01.2015 Сообщений: 1,374
	18.04.2015, 21:27
	position:absolute тут при чем? 0

Картинка поднимается при наведении курсора и остается на месте

Решение