jquery - 用 :before 创建一个箭头

Question

我有点卡在这上面了。我尝试创建一个将与“事件”幻灯片一起出现的箭头，并使用 :before 但是，箭头卡在框中，我无法将其移出框并定位在边框上，因此它是无缝的。我究竟做错了什么？我在 jsfiddle 中尝试过，它似乎工作正常，所以我猜测 slider 上的其他元素存在问题。

.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;
}

我已经使用开发人员工具对其进行了测试，它运行良好。