Question

我有点坚持这个。我尝试使用“活动”幻灯片创建一个箭头，并使用：然而，之前，箭头卡在框中，我无法将其移动到框外并定位在边框上，因此它是无缝的。我究竟做错了什么？我试过一个jsfiddle，它看起来工作正常，所以我的猜测是滑块上的其他元素存在问题。

.evoslider.default .controlNav li.rotator.active:before
{
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #225985;
content: " ";
left: 0px;
top: 35px;
z-index: 100000;
position: absolute;
}

Not working example， Working example

Answer 1

我检查了您的网站，由于分配给少数几个父容器的overflow: hidden属性，箭头没有出现。请将以下CSS添加到样式表的底部，这样可以解决问题：

li.rotator.active:before {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #225985;
    content: " ";
    left: -11px;
    top: 35px;
    z-index: 100000;
    position: absolute;
}

.evoslider.default .controlNav li.rotator {
     overflow: visible !important;
}

.evoslider.default .control_wrapper {
     overflow: visible !important;
}

.evoslider .outer_control {
     overflow: visible !important;
}

我使用开发人员工具对其进行了测试，结果非常好。

Answer 2

由于您的框上有position: relative，因此您可以在left: -10px样式上设置:before

jsfiddle：http://jsfiddle.net/k6c9qam4/3/

使用：之前创建箭头

2 个答案: