对于我正在构建的wordpress主题，我添加了猫头鹰旋转木马。我可以按照我想要的方式显示导航。旋转木马边上的箭头。
但现在我的问题是，我希望箭头只出现当你悬停在旋转木马。(例如http://www.whowhatwear.com - the squares)
我能够让箭头显示当你悬停在旋转木马上的一个点，但我希望他们显示当你在旋转木马上的任何地方滚动。有人有解决办法吗?
这是我的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;
}
尝试删除所有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>如果你非常挑剔，想在悬停时淡出它们，你可以使用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的不透明度，正如Gleb所提到的。
小提琴
https://jsfiddle.net/Hastig/92L3m327/1/
另一个选项，让jquery处理淡出效果。
(这个例子看起来有点不稳定，我想因为我使用的display: flex和display: block是jquery的默认设置)
.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);
}