我的页面上有两个垂直 Div。左边的那个有一个属性表。单击一个属性会导致右侧的 div 出现并显示该属性的详细信息。我正在使用 CSS 箭头,如 http://cssarrowplease.com/ 中所述。一切看起来和工作都很棒。问题是箭头总是在同一个地方。我希望它与被点击的元素/行的高度相同。
这是我尝试过的:(顺便说一句,我使用的是 Knockout,所以这是来自 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;
}
通常它是垂直居中的,显然是由于“top: 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(),因为 position 返回相对值。
var position = $(event.target.parentElement).offset();
关于jquery - 在光标(或单击的元素)位置创建 CSS 箭头?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16755711/