0
我的页面上有两个垂直Div。左边的那个有一个属性表。点击一个属性会显示正确的div,并显示该属性的详细信息。我正在使用一个CSS箭头,详见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;
}
通常它是垂直居中的,显然是由于“top:50%”。当我对此进行评论并使用我的功能时,它会将这两个元素垂直放置在不同的位置,都朝向顶部。