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 не является решением. Да, снаружи блоки (в большинстве случаев, но не обязательно) шевелиться перестанут, но из-за изменения внутреннего размера блока, на который навели мышь, внутри него что-то начнёт двигаться.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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