我的页面上有两个垂直Div。左边的一个有一个属性表。单击属性将导致右div出现并显示该属性的详细信息。我正在使用http://cssarrowplease.com/中所述的CSS箭头,所有外观和效果都很好。问题在于箭头始终在同一位置。我希望它与单击的元素/行的高度相同。

这是我尝试的方法:(顺便说一句,我正在使用Knockout,所以这是来自淘汰赛点击事件。我已经确认“排名”是正确的)

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%”。当我将其注释掉并在上面使用我的函数时,它将两个元素垂直放置在不同的位置,都朝着顶部。

最佳答案

显然,您不能直接使用jquery设置伪类。见Changing width property of a :before css selector using JQuery

此解决方案效果很好:

$('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>');


另外,当位置返回相对值时,我必须用.offset()替换.position()。

var position = $(event.target.parentElement).offset();

关于jquery - 在光标(或单击的元素)位置创建CSS箭头?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/16755711/

10-16 21:12
查看更多