Как заставить стрелки появляться на карусели только при наведении

Для моей темы WordPress, которую я создаю, я добавил карусель совы. Мне удалось заставить навигацию выглядеть так, как я хочу. Стрелки сбоку от карусели.

Но теперь моя проблема в том, что я хочу, чтобы стрелки появлялись только при наведении курсора на карусель. (Пример: http://www.whowhatwear.com – квадраты)

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

Вот мой css

/* Navigation */
.owl-prev, .owl-next {
  position:absolute;
  top:50%;
  padding:5px;
  margin:0;
  z-index:100;
  font-size:3rem;
  cursor:pointer;
  color:#000000; 
}

.owl-prev {
  left:-10px;
  opacity: 0 !important;
}

.owl-next {
  right:-10px;
  opacity: 0 !important;
}

.owl-theme .owl-controls .owl-buttons div{
  color: #555;
  display: inline-block;
  zoom: 1;
  *display: inline;/*IE7 life-saver */
  font-size: 3rem;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  background: transparent;
  filter: Alpha(Opacity=100);/*IE7 fix*/
  opacity: 1;
  margin-top:-32px;
}

.owl-theme .owl-controls .owl-buttons div:hover {
  color:#000000;
  opacity: 1 !important;
}

user6738171 24.08.2016 источник

Ответы (2)

arrow_upward
3
arrow_downward

Попробуйте удалить все свойства opacity и используйте этот CSS:

.owl-buttons {
  display: none;
}

.owl-carousel:hover .owl-buttons {
  display: block;
}

Например: http://codepen.io/glebkema/pen/GqbWYd.

$(document).ready(function() {
 
  $("#owl-example").owlCarousel({
      itemsDesktop : [1499,4],
      itemsDesktopSmall : [1199,3],
      itemsTablet : [899,2],
      itemsMobile : [599,1],
      navigation : true,
      navigationText : ['<span class="fa-stack"><i class="fa fa-circle fa-stack-1x"></i><i class="fa fa-chevron-circle-left fa-stack-1x fa-inverse"></i></span>','<span class="fa-stack"><i class="fa fa-circle fa-stack-1x"></i><i class="fa fa-chevron-circle-right fa-stack-1x fa-inverse"></i></span>'],
  });
  
});

@import url('https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css');

.owl-buttons {
  display: none;
}
.owl-carousel:hover .owl-buttons {
  display: block;
}

.owl-item {
  text-align: center;
}

.owl-theme .owl-controls .owl-buttons div {
  background: transparent;
  color: #869791;
  font-size: 40px;
  line-height: 300px;
  margin: 0;
  padding: 0 60px;
  position: absolute;
  top: 0;
}
.owl-theme .owl-controls .owl-buttons .owl-prev {
  left: 0;
  padding-left: 20px;
}
.owl-theme .owl-controls .owl-buttons .owl-next {
  right: 0;
  padding-right: 20px;
}

<div id="owl-example" class="owl-carousel">
  <div><img src="https://via.placeholder.com/300x300/936/c69/?text=1" alt=""></div>
  <div><img src="https://via.placeholder.com/300x300/693/9c6/?text=2" alt=""></div>
  <div><img src="https://via.placeholder.com/300x300/369/69c/?text=3" alt=""></div>
  <div><img src="https://via.placeholder.com/300x300/c33/f66/?text=4" alt=""></div>
  <div><img src="https://via.placeholder.com/300x300/099/3cc/?text=5" alt=""></div>
  <div><img src="https://via.placeholder.com/300x300/f93/fc6/?text=6" alt=""></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>

Gleb Kemarsky 24.08.2016

comment

@user6738171 user6738171 Я добавил пример в свой ответ, пожалуйста, проверьте. - Gleb Kemarsky; 25.08.2016

arrow_upward
0
arrow_downward

Если вы хотите быть очень придирчивым и затемнять их при наведении, вы можете сделать это с непрозрачностью hsla или rgba.

CSS

.carousel-buttons {
  background-color: hsla(0, 0%, 100%, 0); /*hide buttons by default*/
  color: hsla(0, 0%, 0%, 0); /*hide buttons by default*/
  transition: all 0.2s linear; /*adjust for your fade effect*/
}
.carousel:hover .carousel-buttons {
  background-color: hsla(0, 0%, 100%, 1); /*show buttons on carousel hover*/
  color: hsla(0, 0%, 0%, 1); /*show buttons on carousel hover*/
}
.carousel-buttons:hover {
  background-color: hsla(25, 50%, 75%, 1)!important; /*important needed for hover on individual button*/
  color: hsla(0, 0%, 20%, 1)!important; /*important needed for hover on individual button*/
}

обязательно удалите непрозрачность в вашем текущем css, как упоминал Глеб.

скрипка

https://jsfiddle.net/Hastig/92L3m327/1/

Другой вариант, пусть jquery обрабатывает эффект затухания.

(этот пример выглядит немного шатким, я думаю, потому что я использую display: flex и display: block, что jquery, к сожалению, устанавливает по умолчанию)

CSS

.carousel-buttons {
  background-color: hsla(0, 0%, 100%, 1);
  color: hsla(0, 0%, 0%, 1);
}

.carousel-buttons:hover {
  background-color: hsla(25, 50%, 75%, 1);
  color: hsla(0, 0%, 0%, 1);
}

html

<!-- start them out with display: none; set in inline styles -->
<div class="carousel-buttons carousel-button-left" style="display: none;">l</div>
<div class="carousel-buttons carousel-button-right" style="display: none;">r</div>

Jquery

// jquery show will change them to display: block
$('.carousel')
  .mouseenter(function() {
    $('.carousel-buttons').show(200);
  })
  .mouseleave(function() {
    $('.carousel-buttons').hide(200);
  });
// jquery hide will change them to back to display: none

скрипка

https://jsfiddle.net/Hastig/92L3m327/2/

Hastig Zusammenstellen 25.08.2016

comment

У вас есть самое подходящее имя для 75% пользовательской базы StackOverflow, которую я когда-либо видел. - Fabio Poloni; 25.08.2016

comment

Ха! Я предполагаю, что мои родители были пророческими. - Hastig Zusammenstellen; 25.08.2016

comment

Это не вымышленное имя? Вы когда-нибудь переводили это? - Fabio Poloni; 25.08.2016

comment

Я просто шучу, это мои фальшивые имя и отчество. Фамилия Шайсе. :D - Hastig Zusammenstellen; 25.08.2016

comment

Разыграл явный пранкер. Определенно потерял последний кусочек веры в человечество. - Fabio Poloni; 25.08.2016

Как заставить стрелки появляться на карусели только при наведении

Ответы (2)

Похожие вопросы