Как при наведении на один блок заставить менятся другой

320

26 ноября 2016, 18:37

Есть 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>

Answer 1

*{ 
	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>

Answer 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>

Создание сайта для юридической фирмы в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Подвал на сайте WP

Есть подвал сайта,скопировал весь его код из файла footerphp

256

CSS

Как с помощью CSS нарисовать бекграунд из 4-х плавно переходящих цветов?

Пример такого изображенияФон плавно переходит от желтого к голубом, как реализовать такой же переход?

222

CSS

Как сделать обтекание блока слева?

Сделал общий div для секции с width 100%

280

CSS

Bootstrap. Как блоку дать не стандартную ширину?

Если я пишу например: width: 240px; (это больше ширины колонки), то при просмотре на меньших разрешениях колонка не центрируетсяЧто делать?

174