Question

我创建了一个脚本，根据悬停元素的位置在页面上定位一个框。工作得很好，但是除了移动的盒子之外，我想在盒子里面放一个箭头指向悬停在元素上面。我只是无法弄清楚如何。

我尝试将其水平定位，与我垂直定位的方式类似，但这并不接近正确。我的javascript：

docSize = $('innerbody').getSize();
hint_obj = $('hint_obj');
hint_arr = hint_obj.getChildren('.hint_arr')[0];

$$('.item').addEvents({
    mouseenter: function(e) {
        var el = e.target;
        var elemPosition = el.getPosition();
        hint_obj.setStyle('bottom', (docSize.y - elemPosition.y - 80));
        hint_arr.setStyle('left', (docSize.x - elemPosition.x));
    },
    mouseout: function(e) {
        hint_obj.setStyle('bottom', null);
    }
});

我已经做了一个模拟我试图在这里做的事情：http://jsfiddle.net/0jowade8/2/

任何建议都将受到赞赏。

Answer 1

如上所述Dimitar Christoff，只能通过使用:after伪元素来解决CSS问题。

.item:hover:after {
    border-bottom: 14px solid rgba(255, 255, 255, 1);
    border-left: 14px solid rgba(0, 0, 0, 0);
    border-right: 14px solid rgba(0, 0, 0, 0);
    content: "";
    position: absolute;
    top: 66px;
    left: 26px;
}

<强> FIDDLE

如何根据Javascript / Mootools中页面上不同对象的位置定位箭头

1 个答案: