Полное исчезновения div'a

@Tenass · Регистрация: 21.03.2010

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

Есть див, нужно чтобы при наведение на него он перемещался вниз и полностью исчезал. Ниже представлен код, но див после передвижения курсора мышки возвращается назад, а этого не надо.

CSS

.kvadrat1 {
    height: 100px;
    width: 120px;
    background: #808991;
    opacity: 1.0;
    transition:all 1s ease-in-out;
    -webkit-transition:all 1s ease-in-out;
    -moz-transition:all 1s ease-in-out;
    -o-transition:all 1s ease-in-out
}
 
.kvadrat1:hover {
    opacity: 0;
    transform:translateY(600px);
    -webkit-transform:translateY(600px);
    -moz-transform:translateY(600px);
    -o-transform:translateY(600px);       
}

спасибо заранее за ответы

@killlfun · 24.08.2014, 17:52

Tenass, это js

@monochromer · 24.08.2014, 18:12

как так

HTML5

1	<div class="square"></div>

CSS

.square {
    height: 100px;
    width: 120px;
    background: #808991;
    opacity: 1.0;
    transition:all 1s ease-in-out;
    -webkit-transition:all 1s ease-in-out;
    -moz-transition:all 1s ease-in-out;
    -o-transition:all 1s ease-in-out
}
 
.square.hover {
    opacity: 0;
    transform:translateY(600px);
    -webkit-transform:translateY(600px);
    -moz-transform:translateY(600px);
    -o-transform:translateY(600px);       
}

Javascript

window.onload = function() {
  
  var el = document.querySelector(".square");
 
  el.onmouseover = function() {
    this.classList.add("hover");
  };
  
};

@Tenass · 24.08.2014, 18:43 **[ТС]**

вопрос, можно ли сделать чтобы див не возвращался в начальное положение?

@monochromer · 24.08.2014, 19:36

При таком коде он и так не возвращается.

@Tenass · 24.08.2014, 19:38 **[ТС]**

monochromer, возвращается

@Игорь[Igor] · 24.08.2014, 19:45

Может добавить

CSS

1	position: absolute;

@Tenass · 24.08.2014, 19:48 **[ТС]**

Игорь[Igor], не помогло

@vovandr · 24.08.2014, 19:59

Tenass выше monochromer предоставил вам рабочий код, где блок обратно не возвращается

@Tenass · 24.08.2014, 20:09 **[ТС]**

vovandr, он не работает у меня

@Игорь[Igor] · 24.08.2014, 20:19

оформить надо

Javascript

<script>window.onload = function() {
  
  var el = document.querySelector(".square");
 
  el.onmouseover = function() {
    this.classList.add("hover");
  };
  
};</script>

@Tenass · 24.08.2014, 20:24 **[ТС]**

Игорь[Igor], так я так и делаю - не работает

Добавлено через 1 минуту
я думаю может можно как-то в css прописать чтобы он не возвращался на старт. но перерыл уже достаточно материала - не могу найти такого

@vovandr · 24.08.2014, 20:45

Сообщение от Tenass

я думаю может можно как-то в css прописать чтобы он не возвращался на старт. но перерыл уже достаточно материала - не могу найти такого

Не получится, даже с помощью анимации, только через js. В каком браузере тестили?

@Tenass · 24.08.2014, 20:47 **[ТС]**

vovandr, Opera 23.0, chrome 36, firefox 31

@vovandr · 24.08.2014, 20:55

Сообщение от Tenass

Opera 23.0, chrome 36, firefox 31

Выложите код полностью здесь, котрый не работает...то есть всю страничку

@Tenass · 24.08.2014, 21:13 **[ТС]**

код index.html

HTML5

<!DOCTYPE html>
<html>
    <head>
        <title>Portfolio Chygryn Alexander</title>
        <link href="style.css" rel="stylesheet">     
    </head>
 
<body>
    
 
 
 
    <div class="kvadrat1">
        
    </div>
 
<div class="maindiv">
<p>MAIN DIV</p>
</div>
 
<script src="script.js"></script>
  
</body>
</html>

код JS

Javascript

window.onload = function () {
 
    var el = document.querySelector(".kvadrat1");
 
    el.onmouseover = function () {
        this.classList.add("hover");
    };
 
};

код css:

CSS

.maindiv {
    position: fixed;
    top: 45%;
    left: 45%;
    
    height: 50px;
    width: 100px;
    border: 2px solid blue;
}
 
.kvadrat1 {
    height: 100px;
    width: 120px;
    background: #808991;
    opacity: 1.0;
    position:fixed;
    transition:all 1s ease-in-out;
    -webkit-transition:all 1s ease-in-out;
    -moz-transition:all 1s ease-in-out;
    -o-transition:all 1s ease-in-out
}
 
.kvadrat1:hover {
    opacity: 0.3;
    position: absolute;
    transform:translateY(600px);
    -webkit-transform:translateY(600px);
    -moz-transform:translateY(600px);
    -o-transform:translateY(600px); 
}

@vovandr · 24.08.2014, 21:32

Tenass у вас все по-другому совершенно. Сравните:

HTML5

<!DOCTYPE html>
<html>
    <head>
        <title>Portfolio Chygryn Alexander</title>
          
    </head>
 
<body>
    
    <style>
        .maindiv {
    position: fixed;
    top: 45%;
    left: 45%;
    
    height: 50px;
    width: 100px;
    border: 2px solid blue;
}
 
.kvadrat1 {
    height: 100px;
    width: 120px;
    background: #808991;
    opacity: 1.0;
    position:fixed;
    transition:all 1s ease-in-out;
    -webkit-transition:all 1s ease-in-out;
    -moz-transition:all 1s ease-in-out;
    -o-transition:all 1s ease-in-out
}
 
.kvadrat1.hover {
    opacity: 0.3;
    position: absolute;
    transform:translateY(600px);
    -webkit-transform:translateY(600px);
    -moz-transform:translateY(600px);
    -o-transform:translateY(600px); 
}
    </style>
 
 
 
    <div class="kvadrat1">
        
    </div>
 
<div class="maindiv">
<p>MAIN DIV</p>
</div>
 
<script>
    window.onload = function () {
 
    var el = document.querySelector(".kvadrat1");
 
    el.onmouseover = function () {
        this.classList.add("hover");
    };
 
};
 
</script>
  
</body>
</html>

@Tenass · 24.08.2014, 21:35 **[ТС]**

ну что сразу можно заметить так это то, что у меня .kvadrat1:hover через двоеточие писался. теперь все работает! спасибо огромное за помощь

@vovandr 636 / 523 / 195 Регистрация: 19.08.2013 Сообщений: 1,400
	24.08.2014, 20:55	15
	Сообщение от Tenass Opera 23.0, chrome 36, firefox 31 Выложите код полностью здесь, котрый не работает...то есть всю страничку 0

@killlfun 102 / 102 / 39 Регистрация: 25.02.2014 Сообщений: 321
	24.08.2014, 17:52	2
	Tenass, это js 0

@Tenass 7 / 7 / 1 Регистрация: 21.03.2010 Сообщений: 397
	24.08.2014, 18:43 [ТС]	4
	вопрос, можно ли сделать чтобы див не возвращался в начальное положение? 0

@monochromer 419 / 381 / 163 Регистрация: 03.01.2013 Сообщений: 966
	24.08.2014, 19:36	5
	При таком коде он и так не возвращается. 0

@Tenass 7 / 7 / 1 Регистрация: 21.03.2010 Сообщений: 397
	24.08.2014, 19:38 [ТС]	6
	monochromer, возвращается 0

@Tenass 7 / 7 / 1 Регистрация: 21.03.2010 Сообщений: 397
	24.08.2014, 19:48 [ТС]	8
	Игорь[Igor], не помогло 0

@vovandr 636 / 523 / 195 Регистрация: 19.08.2013 Сообщений: 1,400
	24.08.2014, 19:59	9
	Tenass выше monochromer предоставил вам рабочий код, где блок обратно не возвращается 0

@Tenass 7 / 7 / 1 Регистрация: 21.03.2010 Сообщений: 397
	24.08.2014, 20:09 [ТС]	10
	vovandr, он не работает у меня 0

@Tenass 7 / 7 / 1 Регистрация: 21.03.2010 Сообщений: 397
	24.08.2014, 20:24 [ТС]	12
	Игорь[Igor], так я так и делаю - не работает Добавлено через 1 минуту я думаю может можно как-то в css прописать чтобы он не возвращался на старт. но перерыл уже достаточно материала - не могу найти такого 0

@vovandr 636 / 523 / 195 Регистрация: 19.08.2013 Сообщений: 1,400
	24.08.2014, 20:45	13
	Сообщение от Tenass я думаю может можно как-то в css прописать чтобы он не возвращался на старт. но перерыл уже достаточно материала - не могу найти такого Не получится, даже с помощью анимации, только через js. В каком браузере тестили? 0

@Tenass 7 / 7 / 1 Регистрация: 21.03.2010 Сообщений: 397
	24.08.2014, 20:47 [ТС]	14
	vovandr, Opera 23.0, chrome 36, firefox 31 0

@Tenass 7 / 7 / 1 Регистрация: 21.03.2010 Сообщений: 397
	24.08.2014, 21:35 [ТС]	18
	ну что сразу можно заметить так это то, что у меня .kvadrat1:hover через двоеточие писался. теперь все работает! спасибо огромное за помощь 0