javascript - 跳转到元素动画

Question

现在我有一个 id 为“侧边栏”的 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; 
}

Answer 1

查看代码和演示的 fiddle

fiddle :http://jsfiddle.net/XcfhH/1/

演示:http://jsfiddle.net/XcfhH/1/embedded/result/