Question

现在我有一个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; 
}

Answer 1

查看代码和演示的小提琴

小提琴：http://jsfiddle.net/XcfhH/1/

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

跳到元素动画

1 个答案: