1

Есть логотип, размером 256х256. И есть 2псевдоэлемента before и after, которые увеличивают логотип и при ховрее уменьшают его.

Но эти псевдоэлементы увеличивают ширину и высоту родителя на процент увеличения который им установлен. Как избежать этого, и сделать что бы ховер работа ТОЛЬКО при наведении на родителя блок?

a.logo{
	display: block;
	width: 256px;
	height: 256px;
  max-width: 256px;
	max-height: 256px;
	background: url(http://i665.photobucket.com/albums/vv20/Davidmj444/Lion_256x256.png) no-repeat center top;
	outline: 1px solid lime;
	position: relative;
}

a.logo::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 256px;
	height: 256px;
	background: url(http://i665.photobucket.com/albums/vv20/Davidmj444/Lion_256x256.png) no-repeat center top;
	transform: scale(1.3) rotate(30deg);
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ie-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

a.logo:hover::after {
	transform: scale(1) rotate(0deg);
}
<a href="" class="logo"></a>

https://jsfiddle.net/mznu4979/

2 ответа 2

1

Поигрался, и вот ответ:

В обычном состоянии для ::before, ::after нужно дать:

visibility:hidden;

А при наведении

visibility: visible;
0

В обычном состоянии для ::before и ::after нужно дать:

opacity: 0;

А при наведении:

opacity: 1;
4
  • Если блоку сделать прозрачность 0 - то при наведении на место где стоит блок - все равно отработает ховер. А от этого и нужно было избавится.
    – user190134
    18 фев 2017 в 19:29
  • @user190134 так visibility:hidden; также само работает. 18 фев 2017 в 20:16
  • visibility - это видимость элемента на странице, а opacity - это прозрачность, это разные свойства
    – user190134
    18 фев 2017 в 21:16
  • @user190134 в данной ситуации их действие идентично. 18 фев 2017 в 21:44

Ваш ответ

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

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