@Norum

Как сделать так, что при наведении стрелка смещалась вправо?

Как сделать так, что правая стрелка навигации при наведении не удлинялась влево и не отталкивала левую стрелку, а удлинялась вправо до конца блока и почему стрелка не меняет цвет при наведении? Увеличение ширины осуществляется через псевдо-элемент.

Сам сайт cn39614.tmweb.ru
Весь код jsfiddle.net/rznq8je9/

Как у меня

60f6048f25259591378271.jpeg

Как надо
60f604b1116f3010907270.jpeg

<section class="spaces">
        <div class="wrapper">
            <div class="content">
                <div class="spaces-title">
                    <h3>Our Spaces</h3>
                    <p>Our space is designed to give you a different experience when working with your team or personally</p>
                    <div class="plug"></div>
                </div>
                <div class="spaces-gal owl-carousel">
                    <div class="spaces-slide one">
                        <h4>Private Space</h4>
                        <p>Comfortable space, Full speed wifi, Free coffe & Snack<br>and many more</p>
                        <div class="details">
                            <span>Check avaibility</span><i class='fas fa-chevron-right'></i>
                        </div>
                    </div>
                    <div class="spaces-slide two">
                        <img src="img/space-2.jpg" alt="2">
                        <span>Custom Office</span>
                        <div class="details">
                            <span>Check avaibility</span><i class='fas fa-chevron-right'></i>
                        </div>
                    </div>
                    <div class="spaces-slide three">
                        <img src="img/space-3.jpg" alt="3">
                        <div class="details">
                            <span>Check avaibility</span><i class='fas fa-chevron-right'></i>
                        </div>
                        <span>Problem solving</span>
                    </div>
                    <div class="spaces-slide four">
                        <img src="img/space-4.jpg" alt="4">
                        <div class="details">
                            <span>Check avaibility</span><i class='fas fa-chevron-right'></i>
                        </div>
                        <span>Working with team</span>
                    </div>
                </div>
                <div class="spaces-slide-counter"></div>
            </div>
        </div>
    </section>


.spaces-gal .owl-prev i,
.spaces-gal .owl-next i {
  color: #9a9a9a;
  transition: 0.3s;
}
.spaces-gal .owl-prev:after {
  content: '';
  display: inline-block;
  border-bottom: 6px solid #9a9a9a;
  width: 0;
  vertical-align: middle;
  margin-top: -10px;
  margin-left: -1px;
  transition: 0.3s all;
}
.spaces-gal .owl-prev:hover:after {
  width: 50px;
  color: #ff5722;
}
.spaces-gal .owl-next:before {
  content: '';
  display: inline-block !important;
  border-bottom: 6px solid #9a9a9a;
  width: 0;
  vertical-align: middle;
  margin-top: -10px;
  margin-right: -20px;
  transition: 0.3s all;
  margin-left: 30px;
}
.spaces-gal .owl-next:hover:before {
  width: 50px;
  color: #ff5722;
}
  • Вопрос задан
  • 65 просмотров
Пригласить эксперта
Ответы на вопрос 1
@Aricus
Стрелка не удлиняется вправо из-за позиционирования родительского элемента:
.spaces-gal .owl-nav {
    font-size: 40px;
    position: absolute;
    top: -100px;
    right: 50px;
}

Чтобы этого избежать, можно позиционировать owl-prev и owl-next отдельно. Левую - через right, а правую - через left и calc.
Насчёт цвета, color нужно изменять в самой стрелке, а в :before - border-bottom-color.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы