如何在右側的指示框上指示箭頭指向左側的焦點區域？

Question

我有一個網頁上有一個窗體。該頁面分爲左側和右側兩列。表格位於左側，右側有一個指示框。

當前，右側的框由一個cssarrowplease #arrow_box div組成，該箭頭指向左側的箭頭。

我希望箭頭移動，以便它指向左側具有焦點的表單域。

通過玩CSS，我可以手動上下移動箭頭。但是，我不確定如何在我選擇或單擊以關注每個不同的表單域時動態地執行這些動作。

Answer 1

如果我理解正確，可以爲每個位置添加類並根據焦點位於某些表單字段時的樣式更改#arrow_box div的類。

雖然這是一個冗長的方法。

CSS第1類：

.arrow_box 
{ 
    position: relative; 
    background: #88b7d5; 
    border: 4px solid #c2e1f5; 
} 
.arrow_box:after, .arrow_box:before 
{ 
    left: 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-left-color: #88b7d5; 
    border-width: 10px; 
    top: 10%; 
    margin-top: -10px; 
} 
.arrow_box:before 
{ 
    border-color: rgba(194, 225, 245, 0); 
    border-left-color: #c2e1f5; 
    border-width: 16px; 
    top: 10%; 
    margin-top: -16px; 
} 

和CSS二級：

唯一的變化將是類名和以下： 示例：

.arrow_box 
{ 
    top: 10%; 
} 

變得

.arrow_box_element2 
{ 
    top: 20%; 
} 

比方說你有一個JavaScript方法時Focus是元素上被稱爲：

function onFocusElement1() 
{ 
    $("#arrow_box").attr('class', 'arrow_box'); 
} 

function onFocusElement2() 
{ 
    $("#arrow_box").attr('class', 'arrow_box_element2'); 
} 

希望這有助於:)