Проблема с :hover

257

10 декабря 2016, 10:36

Не работает трансформация при наведении,подскажите что не так? .menu не расширяется при наведении на него

.menu { 
     width:100px; 
	 height:100px; 
	 background:orange; 
	 transform:scale(0.5); 
} 
.menu:hover { 
	transform:scale(1); 
} 
.show-menu { 
	width:50px; 
	height:50px; 
	background:black; 
	position:absolute; 
	z-index:1000; 
	top:33px; 
	left:33px; 
}

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Документ без названия</title> 
<link href="about.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
<div class="menu"></div> 
<div class="show-menu"></div> 
</body> 
</html>

Answer 1

В дополнении к вышенаписанному, menu прячется за show-menu по причине того, что у последнего стоит z-index: 1000 , поэтому даже если в html вы поставите menu выше, оно все равно будет на нижнем слое. Посмотрите на css ниже. И если стоит scale(0,5) получается вы уменьшили на 50%, а при hover поставили scale(1) - возврат к 100%, так что в данном случае scale(1) срабатывает.

.menu { 
   width:100px; 
	 height:100px; 
	 background:orange; 
	 transform: scale(0.5); 
   z-index:1001; 
} 
.menu:hover { 
	transform: scale(1); 
  transition: all 0.4s; 
} 
.show-menu { 
	width:50px; 
	height:50px; 
	background:black; 
	position:absolute; 
	z-index:1000; 
	top:33px; 
	left:33px; 
}

<div class="menu"></div> 
<div class="show-menu"></div>

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

Все вопросы

ТОП-10

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

Обработка Multiple Select

Есть простой multiple select:

274

HTML

Проблема с наложением одного блока на другой

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

295

HTML

Как задать ширину для кнопки

ЗдравствуйтеНе получается почему-то установить фиксированную ширину для кнопки

324

HTML

Как получить ссылку на изображение, зная ссылку на HTML страницу её содержащую? [закрыто]

У меня есть массив ссылок на сайт, на котором сделан скриншот, такого типа:

338