Вот html:
<div class="third-row">
<div class="headline-item">
<div class="left-lines">
<div class="l-first-line">
</div>
<div class="l-second-line">
</div>
<div class="l-first-line">
</div>
</div>
<div class="headtext">
Услуги мастерской <span class="white">Авто</span><span class="red">Холл</span>
</div>
<div class="left-lines right-lines">
<div class="r-first-line">
</div>
<div class="r-second-line">
</div>
<div class="r-first-line">
</div>
</div>
</div>
<div class="s-items clearfix">
<a href="#" class="s-item">
<img src="images/s-icon1.png" alt="" class="s-item-icon1">
<div class="s-item-text">
Кузовной ремонт
</div>
<div class="big-border">
<div class="big-border-text">
</div>
</div>
</a>
<a href="#" class="s-item">
<img src="images/s-icon2.png" alt="" class="s-item-icon2">
<div class="s-item-text">
Механические работы
</div>
<div class="big-border">
<div class="big-border-text">
</div>
</div>
</a>
<a href="#" class="s-item">
<img src="images/s-icon3.png" alt="" class="s-item-icon3">
<div class="s-item-text">
Экспресс-услуги
</div>
<div class="big-border">
<div class="big-border-text">
</div>
</div>
</a>
<a href="#" class="s-item">
<img src="images/s-icon4.png" alt="" class="s-item-icon4">
<div class="s-item-text">
Диагностика
</div>
<div class="big-border">
<div class="big-border-text">
</div>
</div>
</a>
<a href="#" class="s-item">
<img src="images/s-icon5.png" alt="" class="s-item-icon5">
<div class="s-item-text">
Слесарные работы
</div>
<div class="big-border">
<div class="big-border-text">
</div>
</div>
</a>
<a href="#" class="s-item">
<img src="images/s-icon6.png" alt="" class="s-item-icon6">
<div class="s-item-text">
Ремонт пластика
</div>
<div class="big-border">
<div class="big-border-text">
</div>
</div>
</a>
</div>
<div class="s-about">
<div class="about-text-items-f">
<div class="about-text">
Стапельные работы
</div>
<div class="about-text">
Жестяные работы
</div>
<div class="about-text">
Арматурные работы
</div>
<div class="about-text">
Покраска автомобиля
</div>
<div class="about-text">
Локальная покраска
</div>
<div class="about-text">
Покраска мотоцикла
</div>
<div class="about-text">
Абразивная
</div>
</div>
<div class="about-text-items-f">
<div class="about-text about-text2">
Полировка
</div>
<div class="about-text about-text2">
Легкая полировка блеск
</div>
<div class="about-text about-text2">
Защитная полировка
</div>
<div class="about-text about-text2">
Антикоррозийная полировка кузова
</div>
<div class="about-text about-text2">
Удаление вмятин без покраски
</div>
</div>
</div>
Вот css:
.third-row {
height: 600px;
background: #191919;
padding: 70px 0 0 0;
}
.headline-item {
width: 575px;
margin: 0 auto;
display: flex;
align-items: center;
}
.headtext {
font-size: 40px;
text-transform: uppercase;
color: #c9c9c9;
font-family: 'BebasRegular';
text-align: center;
float: left;
margin: 0 25px;
}
.headtext .white {
color: #fff;
}
.headtext .red {
color: #d12f22;
}
.left-lines {
float: left;
}
.right-lines {
float: right;
}
.l-first-line {
width: 35px;
height: 1px;
background: #c9c9c9;
margin: 0 0 0 15px;
}
.l-second-line {
width: 50px;
height: 1px;
background: #c9c9c9;
margin: 0 0 7px 0;
}
.l-first-line:first-child {
margin: 0 0 7px 15px;
}
.r-first-line {
width: 35px;
height: 1px;
background: #c9c9c9;
margin: 0 0 0 0;
}
.r-second-line {
width: 50px;
height: 1px;
background: #c9c9c9;
margin: 0 0 7px 0;
}
.r-first-line:first-child {
margin: 0 0 7px 0;
}
.s-items {
width: 1110px;
margin: 0 auto;
margin-top: 70px;
}
.s-item {
display: block;
position: relative;
width: 160px;
height: 165px;
background: transparent;
border: 1px solid rgba(255,255,255,.2);
display: flex;
justify-content: center;
box-sizing: border-box;
float: left;
transition: .3s;
}
.s-item:hover {
background: #2a2a2a;
}
.s-item:nth-of-type(1n+2) {
margin-left: 30px;
}
.s-item-icon1 {
margin-left: -45px;
position: absolute;
top: 25px;
left: 50%;
}
.s-item-icon2 {
margin-left: -36.5px;
position: absolute;
top: 20px;
left: 50%;
}
.s-item-icon3 {
margin-left: -51.5px;
position: absolute;
top: 45px;
left: 50%;
}
.s-item-icon4 {
margin-left: -32.5px;
position: absolute;
top: 30px;
left: 50%;
}
.s-item-icon5 {
margin-left: -30px;
position: absolute;
top: 30px;
left: 50%;
}
.s-item-icon6 {
margin-left: -39.5px;
position: absolute;
top: 35px;
left: 50%;
}
.s-item-text {
color: #fefefe;
font-size: 20px;
text-transform: uppercase;
font-family: 'BebasRegular';
position: absolute;
top: 105px;
transition: .3s;
}
.s-item:hover .s-item-text {
border-bottom: 1px solid #fefefe;
}
.big-border {
width: 160px;
height: 25px;
background: #212121;
position: absolute;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
transition: .3s;
}
.s-item:hover .big-border {
background: #353535;
}
.big-border-text {
font-family: 'awesome';
color: #fff;
}
.about-text-items-f {
display: flex;
justify-content: space-around;
}
.s-about {
width: 1110px;
height: 90px;
background: #353535;
margin: 0 auto;
margin-top: 20px;
display: none;
}
.s-item:hover .s-about {
display: block;
}
.about-text {
margin-top: 17px;
color: #fefefe;
font-size: 20px;
font-family: 'BebasRegular';
border-bottom: 1px solid #fefefe;
}
.about-text2 {
margin-top: 8px;
}
При наведении на .s-item, .s-about должен меняться с display: none на display: block, но этого не происходит. При наведении на .s-item, s.about не появляется. Почему?
Простой
Средний