javascript - How can I make an arrow on an instruction box on the right move to point to the field on the left that is in focus? -

i have web page form on it. page separated 2 columns, left , right. form on left , there box instructions on right.

currently, box on right comprised of cssarrowplease #arrow_box div configured arrow pointing left.

i arrow move points form field on left has focus.

by playing css, can manually move arrow , down. however, unsure how make moves dynamically tab or click focus on each different form field.

if understand correctly, can add classes each position , change class of #arrow_box div according style when focus on form fields.

although lengthy method.

css class 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;  } 

and css class 2:

the change classname , following: example:

.arrow_box {     top: 10%; } 

becomes

.arrow_box_element2 {     top: 20%; } 

lets have javascript method called when focus on element:

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

hope helps :)