1

Есть 5 блоков, 4 играют роль фона, а пятый как объект. Как реализовать чтобы при наведении на блок заставить двигаться пятый блок?

*{
	margin:0;
	padding:0;
}
html,body{
	height:100%;
}
#bg1,#bg2{
	float:left;
	background-color:tomato;
	border:1px solid;
	width:49.7%;
	height:50%;
}
#bg3,#bg4{
	float:left;
	background-color:tomato;
	border:1px solid;
	width:49.7%;
	height:50%;
}
#movement
<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <link rel="stylesheet" type="text/css" href="css.css">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        </head>
 <body>
 <div id='bg1'></div>
 <div id='bg2'></div>
 <div id='bg3'></div>
 <div id='bg4'></div>
 <div id='movement'></div>
</body>

</html>

4

2 ответа 2

2

*{
	margin:0;
	padding:0;
}
html,body{
	height:100%;  
}
#bg1,#bg2{
	float:left;
	background-color:tomato;
	border:1px solid;
	width:49.7%;
	height:50%;
}
#bg3,#bg4{
	float:left;
	background-color:tomato;
	border:1px solid;
	width:49.7%;
	height:50%;
}
#movement{
  background: blue;
  clear: both;
  width: 150px;
  height: 150px;
  position: absolute; top: 50%; left: 50%;
  margin: -75px 0 0 -75px;
}

#bg1:hover ~ #movement{
  background: green;
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#bg2:hover ~ #movement{
  background: green;
  -webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}
#bg3:hover ~ #movement{
  background: green;
  -webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
#bg4:hover ~ #movement{
  background: green;
  -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
<div id='bg1'></div>
 <div id='bg2'></div>
 <div id='bg3'></div>
 <div id='bg4'></div>
 <div id='movement'></div>

2

*{
	margin:0;
	padding:0;
}
html,body{
	height:100%;
}
#bg1,#bg2{
	float:left;
	background-color:tomato;
	border:1px solid;
	width:49.7%;
	height:50%;
}
#bg3,#bg4{
	float:left;
	background-color:tomato;
	border:1px solid;
	width:49.7%;
	height:50%;
}
#movement {
  width: 100px;
  height: 100px;
  background: lime;
  position: relative;
  z-index: 1;
  top: 50%;
  left: 50%;
  transition: 1s all;
}
#bg1:hover ~ #movement {
  top: 70%;
}
#bg2:hover ~ #movement {
  left: 70%;
}
#bg3:hover ~ #movement {
  top: 30%;
}
#bg4:hover ~ #movement {
  left: 30%;
}
<div id='bg1'></div>
<div id='bg2'></div>
<div id='bg3'></div>
<div id='bg4'></div>
<div id='movement'></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.