在光標（或點擊元素）位置創建CSS箭頭？

我的頁面上有兩個垂直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％」。當我對此進行評論並使用我的功能時，它會將這兩個元素垂直放置在不同的位置，都朝向頂部。

來源

2013-05-26 Scott Beeson

顯然你不能直接使用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>');

此外，我不得不更換.POSITION（）與.offset（）的位置返回的相對值。

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

來源

2013-05-26 02:53:03

在光標（或點擊元素）位置創建CSS箭頭？

回答

相關問題