Скажите пожалуйста почему у меня постоянно дергаются блоки которые расположены в одну строку один за другим?
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;
}
При ховере у вас стоит border: none;
, чтобы блоки не двигались при наведении необходимо для .catalog_item
прописать свойство box-sizing: border-box;
Для изменения цвета тире перед пунктами списка используйте селектор .catalog_item:hover ul li:before
UPD: Если предполагалось, что цвет тире меняется по наведению на пункт списка, как отметил в комментарии выше Arnial, используйте селектор .catalog_item ul li:hover:before
.
Сдвиг происходит из-за изменения размеров элемента при наведении - исчезает граница.
Правильнее всего это исправить установкой border-color: transparent
.
Так же возможно заменить исчезновение border'а за счёт увеличения padding'а, но этот способ не только потребует больше усилий в плане реализации (надо посчитать, какой padding выставить, а ещё может оказаться, что единицы измерения у padding и border разные из-за чего понадобится calc), но и вызовет более существенные перерасчёты в браузере.
Вариант с изменением box-sizing
на border-box
не является решением. Да, снаружи блоки (в большинстве случаев, но не обязательно) шевелиться перестанут, но из-за изменения внутреннего размера блока, на который навели мышь, внутри него что-то начнёт двигаться.
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Есть блок bootostrap с картинками неизвестного изначально размера (могут быть любыми) 4 штуки, 1 ряд. Как выровнять их в ряду на всех разрешениях?...