2

Проблема заключается в чём, делаю слайдет, кнопки переключения должны быть в виде стрелочек, с задним полупрозрачным фоном, который я оформил через before, при наведении задний фон должен меняться на красный, но вот hover эффект как не стараюсь правильно применить, не чего не выходит, постоянно что-то слетает.

.slider-nav-container {
    position: relative;
}

.slider-nav-container .slider-nav {
    position: absolute;
    z-index: 2;
    width: 100%;
    color: #fff;
    font-size: 20px;
}

.slider-nav-container .slider-nav div {
    cursor: pointer;
    position: absolute;
    top: 185px;
}

.slider-nav-container .slider-nav div:hover {
    background-color: #c0301c;
    padding: 1px 12px;
}

.slider-nav-container .slider-nav div::before {
    content: '';
    position: absolute;
    top: 0;
    left: -12px;
    background-color: rgba(0, 0, 0, 0.3);
    width: 35px;
    height: 35px;
    z-index: -1;
}

.slider-nav-container .slider-nav div:last-child {
    right: 0;
}
                   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">


                   <div class="slider-nav-container">
                        <div class="slider-nav">
                            <div class="prev"><i class="fa fa-chevron-left"></i></div>
                            <div class="next"><i class="fa fa-chevron-right"></i></div>
                        </div>
                    </div>

1 ответ 1

2

Пример

* {
  margin: 0;
}

.slider-nav-container {
  position: relative;
  height: 100vh;
}

.slider-nav-container .slider-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  color: #fff;
  font-size: 20px;
  margin-top: -17.5px;
  width: 100%;
}

.slider-nav-container .slider-nav div {
  cursor: pointer;
  position: absolute;
  top: 0;
  background-color: rgba(0, 0, 0, 0.3);
  width: 35px;
  height: 35px;
  line-height: 35px;
  text-align: center;
}

.slider-nav-container .slider-nav div.prev {
  left: 0;
}

.slider-nav-container .slider-nav div.next {
  right: 0;
}

.slider-nav-container .slider-nav div:hover {
  background-color: #c0301c;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">


<div class="slider-nav-container">
  <div class="slider-nav">
    <div class="prev"><i class="fa fa-chevron-left"></i></div>
    <div class="next"><i class="fa fa-chevron-right"></i></div>
  </div>
</div>

Ваш ответ

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

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