I am currently working on a sidebar with links that have a hover effect to add a bullet. However, I want the bullet to smoothly follow the cursor's movement along the y-axis within the sidebar instead of jumping between the links. How can I achieve this using jQuery?
HTML
<div id="sidebar">
<dl class="nice vertical tabs">
<dd><a href="#BiblesandCommentaries">الانجيل-تعليقات</a> </dd>
<dd><a href="#EnquirersLibrary">الاستفسارات</a> </dd>
<dd><a href="#NewBelievers">مؤمنون جدد</a> </dd>
<dd><a href="#ChristianLiving">حياة المسيحى</a> </dd>
<dd><a href="#FamilyLibrary">مكتبة الأسرة</a> </dd>
<dd><a href="#YoungAdultLibrary">مكتبة الشباب</a> </dd>
<dd><a href="#WorshipLibrary">مزامير وتراتيل</a> </dd>
<dd><a href="#BibleTeachings">التدريس</a> </dd>
<dd><a href="#Leadership">القيادة</a> </dd>
<dd><a href="#SchoolofChrist">مدرسة الإنجيل</a> </dd>
<dd><a href="#MinorityLanguages">فهم المسيح</a> </dd>
</dl>
</div>
CSS
#sidebar .tabs a:hover:after {
-webkit-transition: all 1s ;
-moz-transition: all 1s ;
-ms-transition: all 1s ;
-o-transition: all 1s ;
transition: all 1s ;
content: "";
display: block;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-left: 10px solid white;
border-bottom: 5px solid transparent;
position: relative;
bottom: 5px;
margin-left: -20px;
}