2

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

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;
}
2
  • 2
    Ответ на второй вопрос такой: .catalog_item ul li:hover:before.
    – Arnial
    11 ноя 2016 в 12:31
  • Вам не нужно выбирать li который вложен в li:hover.
    – Arnial
    11 ноя 2016 в 12:32

2 ответа 2

3

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

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

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

4
  • 2
    либо сделать border-color: transparent
    – Arnial
    11 ноя 2016 в 12:19
  • Полагаю цвет тирэ, должен изменяться при наведении на пункт меню внутри списка. А не при наведении на список.
    – Arnial
    11 ноя 2016 в 12:34
  • Да, упустил этот момент, вы правы)
    – Игорь
    11 ноя 2016 в 12:41
  • border-box не решит проблему.
    – Qwertiy
    11 ноя 2016 в 12:54
2

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

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

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

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

Ваш ответ

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

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