Работа с псевдоклассом :hover

Общее
1

Добрый день. Вот пробую работать с псевдокласом, но что-то не выходит. может кто то объяснить в чём моя ошибка.
Идея такая - что б при наведение на блок, он смещался в нужную сторону .

<html>
<head>

	<link href="style.css" type="text/css" rel="stylesheet">
</head>
  <meta charset="utf-8">


<body>
	
	<div class="block"> 

			<div class="move"> 

			</div>


	</div>

</body>
</html>

в CSS

body{
background-color: black;
background-attachment: fixed;
color: white;
font-size: 15px;
padding: 10px;

}

.block { background: green center;

     width: 100px;
	 height: 100px;	 
	 margin: 10px;

}

.move: hover {
position: relative;
top: 40px;
left: 40px;

}

2

Я сомневаюсь что это работает. Вы где то читали про это или ваша личная задумка?

3

Если я не ошибаюсь для такого действия код более сложный и с применением скриптов.

4

Не намного сложнее. Всего лишь трансформация. Transform: translate(40, 40);
Обычно делается вместе с плавным переходом transition.

1 лайк
5

Эти знания я еще не постиг видимо:)

6

Спасибо конечно, но оно всё равно не работает

<!DOCTYPE html>
<html>
<head>
	
	<link href="style.css" type="text/css" rel="stylesheet">
</head>
  <meta charset="utf-8">


<body>
	
	<div class="block"> 


			<div class="move"> 

			</div>



	</div>





</body>
</html>

css

body{
background-color: black;
background-attachment: fixed;
color: white;
font-size: 15px;
padding: 10px;

}

.block { background: green center;

     width: 100px;
	 height: 100px;	 
	 margin: 10px;

}

.move: hover {
Transform: translate(40, 40);

}

7

Может потому что написано с большой буквы? Как есть, так и скопировали… А почитать? Это достаточно объемная тема.
Я еще один “умник” :laughing: единицу измерения забыла)
transform: translate(40px, 40px); так точно правильно.

8

И всё равно не работает(

<!DOCTYPE html>
<html>
<head>
	
	<link href="style.css" type="text/css" rel="stylesheet">
</head>
  <meta charset="utf-8">


<body>
	
	<div class="block move"> 

	</div>


	
</body>
</html>

CSS

body{
background-color: black;
background-attachment: fixed;
color: white;
font-size: 15px;
padding: 10px;

}

.block { background: green center;

     width: 100px;
	 height: 100px;	 
	 margin: 10px;

}

.move: hover {
transform: translate(40px, 40px);

}

9

Доберусь до компьютера, посмотрю.

10

Мне тоже стало интересно. Попробую этот сделать.

1 лайк
11

Естт одна идея но надо ее проверить для начала, а то боюсь чушь скажу😬

12

Напишите селектор правильно. Ошибка тянется еще с первой записи. Пробел после двоеточия не нужен.
.move:hover {
transform: translate(40px, 40px);
}
Ваш вариант тоже работает. А корректен ли он - большой вопрос.
http://codepen.io/IneSSka/pen/oxrEKe

3 лайка
13

Прочитав несколько статей, везде описано что ховер применяется по правильному к тегу ссылки редко применяется к див, соответсвенно правильней будет сделать блок с размерами и тд, задать в нем ссылку в данном случае пустую, и ей в css задать размеру на всю ширину родителя и бекграунд, только зачем вообще нужна эта скачущая кнопочка:)

14

Просто идейка появилась, думал можно ли реализовать. :grinning:
Оказывается можно. Поскольку Джавы я не знаю то воспользовался этим примитивом.

<!DOCTYPE html>
<html>
<head>
	
	<link href="style.css" type="text/css" rel="stylesheet">
</head>
  <meta charset="utf-8">


<body>
	
	<div class="block "> 
            <div class="block1 move1">  </div>
			<div class="block2 move2">  </div>
			<div class="block3 move3">  </div>
			<div class="block4 move4">  </div>
			
	</div>


	
</body>
</html>

CSS

body{ 
		background-color: black;
		background-attachment: fixed;
		color: white;
		font-size: 15px;
		padding: 10px;
		
		
}

.block { 
	     width: 100px;
		 height: 100px;	 
		 margin: 300px;
		 
}

.block1 {  background: red;
		   float: left;
width: 50px;
height: 50px;
}

.block2 {  background: yellow;
float: left;
width: 50px;
height: 50px;
}
.block3 {  background: purple;
float: left;
width: 50px;
height: 50px;
}
.block4 {  background: blue;
float: left;
width: 50px;
height: 50px;
}


.move1:hover { 
			transform: translate(-40px, -40px);
}

.move2:hover { 
			transform: translate(40px, -40px);
}

.move3:hover { 
			transform: translate(-40px, 40px);
}

.move4:hover { 
			transform: translate(40px, 40px);
}

Хоть и задергано, но всё таки анимация)

15

Выучите CSS-анимацию и плавные переходы. Добавьте это правило, например:
.move1, .move2, .move3, .move4{
transition: transform 0.5s linear;
}

2 лайка