Javascript Svg列表样式动画

我有两种列表样式，当svg的LI悬停在上面时，我想设置它们的动画。我遇到的问题是，第一个LI会同时触发所有列表项的动画。我试过只使用css，我也试过使用jquery，但我可以用一生的时间来理解它。谢谢你可以查我的密码

.st0{fill:#fff；stroke:#000000；stroke miterlimit:10；}


.st0{fill:#fff；stroke:#000000；stroke miterlimit:10；}


.st0{fill:#fff；stroke:#000000；stroke miterlimit:10；}


.st0{fill:#fff；stroke:#000000；stroke miterlimit:10；}

这就是我能给你的解释

我向

悬停

事件和

鼠标移动

事件添加了一个侦听器

有了这个，你可以瞄准每一个李

$（“LIA”）。每个（函数（）{
$（this）.hover（函数（）{
$（this.css（'color'，'red'）；
})
$（this.mouseleave（function（））{
$（this.css（'color'，'white'）；
})
})
$（“.hamburger”）。在（“单击”，函数（）{
$（“.hamburger”）.toggleClass（“处于活动状态”）；
如果（$（“.hamburger”）.hasClass（“处于活动状态”））{
$（“#main”）.css（“右”，“320px”）；
}否则{
$（“#main”）.css（“右”，“20px”）；
}
$（“.side nav”）.toggleClass（“隐藏”）；
$（“body”）.toggleClass（“菜单活动”）；
});
html，正文{
填充：0；
保证金：0；
高度：10000px；
背景颜色：粉红色；
框大小：边框框；
}
按钮：焦点{大纲：0；}
a{
颜色：#fff；
}
a:悬停，a:活动，a:访问，a:聚焦{
颜色：#fff；
文字装饰：无！重要；
}
svg{
位置：相对位置；
顶部：6px；
左-12px；
高度：15px；
宽度：15px；
浮动：左；
}
.菜单激活{
右侧填充：300px；
}
.侧导航{
位置：固定；
背景颜色：灰色；
宽度：300px；
身高：100%；
z指数：1；
右：0；
}
.打开菜单侧{
位置：相对位置；
显示：块；
高度：80px；
宽度：100%；
文本对齐：居中；
浮动：对；
}
.侧面导航{
位置：相对位置；
宽度：100%；
身高：100%；
边缘顶端：40px；
列表样式：无；
字体大小：20px；
颜色：#fff；
}
人力资源{
右边距：40px；
}
.ul博客{
列表样式：无；
边缘顶部：10px；
高度：100px；
}
.博客{
高度：150像素；
}
.街区{
利润率：20px0；
颜色：#fff；
}
标题{
高度：80px；
背景色：#fff；
}
.隐藏{
位置：绝对位置；
右：-300px；
}
#主要{
位置：固定；
右：10px；
顶部：10px；
}
.汉堡包{
填充：15px 15px；
身高：100%；
显示：内联块；
光标：指针；
过渡属性：不透明度，过滤器；
过渡时间：0.15s；
过渡时间函数：线性；
字体：继承；
颜色：继承；
文本转换：无；
背景色：透明；
边界：0；
保证金：0；
溢出：可见；}
.汉堡包：悬停{
不透明度：0.7；}
.汉堡包盒{
宽度：40px；
高度：24px；
显示：内联块；
位置：相对；}
.汉堡内胆{
显示：块；
最高：50%；
页边距顶部：-2px；}
.汉堡内胆，.汉堡内胆：：之前，.汉堡内胆：：之后{
宽度：40px；
高度：4px；
背景色：#000；
边界半径：4px；
位置：绝对位置；
过渡性质：变换；
过渡时间：0.15s；
转换计时函数：ease；}
.hamburger-inner:：之前，.hamburger-inner:：之后{
内容：“；
显示：block；}
.汉堡内胆{
顶部：-10px；}
.汉堡内胆{
底部：-10px；}
.汉堡--挤压.汉堡内胆{
过渡时间：0.075s；
过渡时间函数：立方贝塞尔（0.55,0.055,0.675,0.19）；}
.汉堡包--挤压.汉堡包内部：：之前{
过渡：顶部0.075s 0.12s缓和，不透明度0.075s缓和；}
.汉堡包--挤压.汉堡包内部：：之后{
转换：底部0.075s 0.12s轻松，转换0.075s三次贝塞尔（0.55,0.055,0.675,0.19）；}
.hamburger--squeak.is-active.汉堡内胆{
变换：旋转（45度）；
过渡延迟：0.12s；
过渡时间函数：立方贝塞尔（0.215,0.61,0.355,1）；}
.hamburger--squeak.is-active.hamburger-inner:：before{
排名：0；
不透明度：0；
过渡：顶部0.075s缓和，不透明度0.075s 0.12s缓和；}
.hamburger--squeak.is-active.hamburger-inner:：after{
底部：0；
变换：旋转（-90度）；
变换：底部0.075s轻松，变换0.075s 0.12s三次贝塞尔（0.215,0.61,0.355,1）；}






.st0{fill:#fff；stroke:#000000；stroke miterlimit:10；}
<ul class="blogs-ul">
                <li class="one">
                    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                         viewBox="0 0 61.7 61.4" style="enable-background:new 0 0 61.7 61.4;" xml:space="preserve">
                    <style type="text/css">
                        .st0{fill:#fff;stroke:#000000;stroke-miterlimit:10;}
                    </style>
                    <rect x="20.7" y="5.2" transform="matrix(0.7071 0.7071 -0.7071 0.7071 19.7538 -17.2354)" class="st0 r1" width="20" height="20"/>
                    <rect x="36.1" y="20.6" transform="matrix(0.7071 0.7071 -0.7071 0.7071 35.1571 -23.6156)" class="st0 r2" width="20" height="20"/>
                    <rect x="20.7" y="36" transform="matrix(0.7071 0.7071 -0.7071 0.7071 41.5374 -8.2123)" class="st0 r3" width="20" height="20"/>
                    <rect x="5.3" y="20.6" transform="matrix(0.7071 0.7071 -0.7071 0.7071 26.1341 -1.832)" class="st0 r4" width="20" height="20"/>
                    <g>
                    </svg>
                    <span><a href="#">Categories</a></span>
                </li>
                <li>
                    <div>
                        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                             viewBox="0 0 61.7 61.4" style="enable-background:new 0 0 61.7 61.4;" xml:space="preserve">
                        <style type="text/css">
                            .st0{fill:#fff;stroke:#000000;stroke-miterlimit:10;}
                        </style>
                        <rect x="20.7" y="5.2" transform="matrix(0.7071 0.7071 -0.7071 0.7071 19.7538 -17.2354)" class="st0 r1" width="20" height="20"/>
                        <rect x="36.1" y="20.6" transform="matrix(0.7071 0.7071 -0.7071 0.7071 35.1571 -23.6156)" class="st0 r2" width="20" height="20"/>
                        <rect x="20.7" y="36" transform="matrix(0.7071 0.7071 -0.7071 0.7071 41.5374 -8.2123)" class="st0 r3" width="20" height="20"/>
                        <rect x="5.3" y="20.6" transform="matrix(0.7071 0.7071 -0.7071 0.7071 26.1341 -1.832)" class="st0 r4" width="20" height="20"/>
                        <g>
                        </svg>
                        <a href="#">Top Blogs</a>
                    </div>
                </li>
                <li>
                    <div>
                        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                             viewBox="0 0 61.7 61.4" style="enable-background:new 0 0 61.7 61.4;" xml:space="preserve">
                        <style type="text/css">
                            .st0{fill:#fff;stroke:#000000;stroke-miterlimit:10;}
                        </style>
                        <rect x="20.7" y="5.2" transform="matrix(0.7071 0.7071 -0.7071 0.7071 19.7538 -17.2354)" class="st0 r1" width="20" height="20"/>
                        <rect x="36.1" y="20.6" transform="matrix(0.7071 0.7071 -0.7071 0.7071 35.1571 -23.6156)" class="st0 r2" width="20" height="20"/>
                        <rect x="20.7" y="36" transform="matrix(0.7071 0.7071 -0.7071 0.7071 41.5374 -8.2123)" class="st0 r3" width="20" height="20"/>
                        <rect x="5.3" y="20.6" transform="matrix(0.7071 0.7071 -0.7071 0.7071 26.1341 -1.832)" class="st0 r4" width="20" height="20"/>
                        <g>
                        </svg>
                        <a href="#">Gilded</a>
                    </div>
                </li>
                <li>
                    <div>
                        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                             viewBox="0 0 61.7 61.4" style="enable-background:new 0 0 61.7 61.4;" xml:space="preserve">
                        <style type="text/css">
                            .st0{fill:#fff;stroke:#000000;stroke-miterlimit:10;}
                        </style>
                        <rect x="20.7" y="5.2" transform="matrix(0.7071 0.7071 -0.7071 0.7071 19.7538 -17.2354)" class="st0 r1" width="20" height="20"/>
                        <rect x="36.1" y="20.6" transform="matrix(0.7071 0.7071 -0.7071 0.7071 35.1571 -23.6156)" class="st0 r2" width="20" height="20"/>
                        <rect x="20.7" y="36" transform="matrix(0.7071 0.7071 -0.7071 0.7071 41.5374 -8.2123)" class="st0 r3" width="20" height="20"/>
                        <rect x="5.3" y="20.6" transform="matrix(0.7071 0.7071 -0.7071 0.7071 26.1341 -1.832)" class="st0 r4" width="20" height="20"/>
                        <g>
                        </svg>
                        <a href="#">Controversial</a>
                    </div>
                </li>
            </ul>