我知道这个插件有自己的按钮类型,但它使用精灵,我不知道如何制作它们。
这是我用过的简短jQuery代码:
$('#prev, #next').hide();
$('.image_carousel').mouseenter(function() {
$('#prev, #next').show("slow");
});
$('.image_carousel').mouseleave(function() {
$('#prev, #next').hide("slow");
});`
和html:
<div class="image_carousel">
<div id="carousel">
carousel items...
</div>
<a class="prev" id="prev" href="#"><i class="icon-angle-left icon-4x"></i></a>
<a class="next" id="next" href="#"><i class="icon-angle-right icon-4x"></i></a>
</div>
在Chrome DevTools中,它显示两个锚标签附加了很多不同的样式,例如不透明度设置为1并且递减,溢出:隐藏,宽度,填充,高度和边距。每次鼠标进入和离开时都会给出这些信息。