Двигаются блоки при наведении

696
24 ноября 2016, 10:17

Скажите пожалуйста почему у меня постоянно дергаются блоки которые расположены в одну строку один за другим?

ul li{ 
	float: left; 
	list-style-type: none; 
} 
a{ 
	text-decoration: none; 
	color: #464646; 
	cursor: pointer; 
} 
 
.clear{ 
	clear: both; 
} 
.catalog{ 
	margin-top: 10px; 
} 
.catalog_item:hover{ 
	border: none; 
	box-shadow: 0 0 10px rgba(0,0,0,0.5); 
	cursor: pointer; 
} 
.catalog_item{ 
	height: 406px; 
	width: 266px; 
	float: left; 
	border: 2px solid #6d87b4; 
	margin: 50px 30px 0 0; 
	position: relative; 
} 
.catalog_item>div{ 
	margin: 18px 0 0 23px; 
} 
.catalog_item>p{ 
	font: 20px RobotoBold; 
	background: #fff; 
	position: absolute; 
    top: -11px; 
    left: 23px; 
    width: 220px; 
    text-align: center; 
} 
.catalog_item ul{ 
	margin-top: 20px; 
} 
.catalog_item ul li{ 
	clear: both; 
} 
/*.catalog_item ul li:last-child a{ 
	opacity: 0.7; 
}*/ 
.catalog_item ul li:hover a{ 
	color: #f7cac9; 
} 
.catalog_item ul li:before { 
    content:  "—"; 
    position: relative; 
    /*left: -5px;*/ 
    color: #6d87b4; 
} 
.catalog_item ul li a{ 
    margin-left: 8px; 
    font-size: 14px; 
} 
.catalog_item div>a{ 
	text-decoration: underline; 
    color: #6d87b4; 
} 
.catalog_item:nth-child(4n+4), .article:nth-child(4n+4), .factories a:nth-child(4n+4){ 
	margin-right: 0; 
} 
.catalog_item img{ 
  width:220px; 
  height:180px; 
 }
<div class="catalog"> 
	<div class="catalog_item"> 
		<p>Мебель для зала</p> 
		<div> 
			<img src="images/Img_2.png" alt""/> 
			<ul> 
				<li><a href="">Витрины</a></li> 
				<li><a href="">Гостиные</a></li> 
				<li><a href="">Комоды</a></li> 
				<li><a href="">Полки</a></li> 
				<li><a href="">Столовые комплекты</a></li> 
				<li><a href="">Столы журнальные</a></li> 
				<li><a href="">Столы обеденные</a></li> 
				<li><a href="">Стулья деревянные</a></li> 
			</ul> 
			<div class="clear"></div>	 
			<a href="">Показать все</a> 
		</div> 
	</div> 
	<div class="catalog_item"> 
		<p>Детские</p> 
		<div> 
			<img src="images/Img_3.png" alt""/> 
			<ul> 
				<li><a href="">Диваны для детской</a></li> 
				<li><a href="">Детские комнаты</a></li> 
				<li><a href="">Детские матрасы</a></li> 
				<li><a href="">Комоды</a></li> 
				<li><a href="">Кресла</a></li> 
				<li><a href="">Кровати двухъярусные</a></li> 
				<li><a href="">Кровати односпальные</a></li> 
				<li><a href="">Кроватки для малышей</a></li> 
			</ul> 
			<div class="clear"></div>	 
			<a href="">Показать все</a> 
		</div> 
	</div> 
	<div class="catalog_item"> 
		<p>Кухни</p> 
		<div> 
			<img src="images/Img_4.png" alt""/> 
			<ul> 
				<li><a href="">Кухонные углы и диваны</a></li> 
				<li><a href="">Модульные кухни</a></li> 
				<li><a href="">Основания для столов</a></li> 
				<li><a href="">Столовые комплекты</a></li> 
				<li><a href="">Столы обеденныек</a></li> 
				<li><a href="">Столы деревянные</a></li> 
				<li><a href="">Стулья деревянные</a></li> 
				<li><a href="">Стулья металлические</a></li> 
			</ul> 
		</div></div> 
	<div class="catalog_item"> 
		<p>Мягкая мебель</p> 
		<div> 
			<img src="images/Img_5.png" alt""/> 
			<ul> 
				<li><a href="">Диваны в наличии</a></li> 
				<li><a href="">Диваны прямые</a></li> 
				<li><a href="">Диваны детские</a></li> 
				<li><a href="">Диваны угловые</a></li> 
				<li><a href="">Комплекты</a></li> 
				<li><a href="">Кухонные углы и диваны</a></li> 
				<li><a href="">Кресла</a></li> 
				<li><a href="">Кресла-кровати</a></li> 
			</ul> 
			<div class="clear"></div>	 
			<a href="">Показать все</a> 
		</div> 
	</div> 
</div>

И как при наведении можно поменять цвет тире перед списком? Я пробовала так-

.catalog_item ul li:hover li:before{
    color: #f7cac9;
}
Answer 1

При ховере у вас стоит border: none;, чтобы блоки не двигались при наведении необходимо для .catalog_item прописать свойство box-sizing: border-box;

Для изменения цвета тире перед пунктами списка используйте селектор .catalog_item:hover ul li:before

UPD: Если предполагалось, что цвет тире меняется по наведению на пункт списка, как отметил в комментарии выше Arnial, используйте селектор .catalog_item ul li:hover:before.

Answer 2

Сдвиг происходит из-за изменения размеров элемента при наведении - исчезает граница.

Правильнее всего это исправить установкой border-color: transparent.

Так же возможно заменить исчезновение border'а за счёт увеличения padding'а, но этот способ не только потребует больше усилий в плане реализации (надо посчитать, какой padding выставить, а ещё может оказаться, что единицы измерения у padding и border разные из-за чего понадобится calc), но и вызовет более существенные перерасчёты в браузере.

Вариант с изменением box-sizing на border-box не является решением. Да, снаружи блоки (в большинстве случаев, но не обязательно) шевелиться перестанут, но из-за изменения внутреннего размера блока, на который навели мышь, внутри него что-то начнёт двигаться.

READ ALSO
Как выровнять блоки разной высоты на всех разрешениях?

Как выровнять блоки разной высоты на всех разрешениях?

Есть блок bootostrap с картинками неизвестного изначально размера (могут быть любыми) 4 штуки, 1 ряд. Как выровнять их в ряду на всех разрешениях?...

663
Автоматически ставится отступ сверху html, css

Автоматически ставится отступ сверху html, css

Собственно, на скриншоте сам и вопрос .

429
Как разместить элементы на одной линии html css

Как разместить элементы на одной линии html css

Хочу разместить элементы в таком порядке, т. е.

546