跳转到元素动画

现在我有一个id为"sidebar"的div，我正在使用css添加一个悬停类，以便在悬停时向链接添加项目符号。问题是，我不希望项目符号在侧边栏中的链接之间显示为"跳过"。我希望当你进入侧边栏时，项目符号在y轴上显示为跟随你的光标。我如何使用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; 
}