0

我的页面上有两个垂直 Div。左边的有一个属​​性表。单击属性会导致出现正确的 div 并显示该属性的详细信息。我正在使用http://cssarrowplease.com/中解释的 CSS 箭头，所有外观和工作都很棒。问题是箭头总是在同一个地方。我希望它与单击的元素/行处于相同的高度。

这是我尝试过的：（顺便说一下，我使用的是淘汰赛，所以这是来自淘汰赛点击事件。我已经确认“位置”是正确的）

function viewConflicts(data, event) {
    var position = $(event.target.parentElement).position();
    $('.arrow_box:after').css('top', position.top);
    $('.arrow_box:before').css('top', position.top);
}

这是改编自上述网站的 CSS：

.arrow_box:after, .arrow_box:before {
    right: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box:after {
    border-color: rgba(136, 183, 213, 0);
    border-right-color: #cbcece;
    border-width: 30px;
    /*top: 50%;*/
    margin-top: -30px;
}
.arrow_box:before {
    border-color: rgba(194, 225, 245, 0);
    border-right-color: red;
    border-width: 31px;
    /*top: 50%;*/
    margin-top: -31px;
}

通常它是垂直居中的，显然是由于“顶部：50%”。当我注释掉它并使用上面的函数时，它会将两个元素垂直放置在不同的位置，都朝向顶部。

4

1 回答 1

0

Apparently you cannot set pseudo classes directly using jquery. See Changing width property of a :before css selector using JQuery

This solution works great:

$('body').append('<style>.arrow_box:before{top:' + (position.top + 8) + 'px !important;}</style>');
$('body').append('<style>.arrow_box:after{top:' + (position.top + 8) + 'px !important;}</style>');

Also, I had to replace .position() with .offset() as position returned the relative value.

var position = $(event.target.parentElement).offset();
于 2013-05-26T02:53:03.910 回答