jquery - CSS动画可以代替JQuery吗？

Question

我想知道这个 jquery 结构是否可以用纯 CSS3 代替？

$('#visibleRoutes > ul:nth-of-type(1)').hover(function () {
                    $('nav#main-nav > div#visibleRoutes > ul:nth-of-type(2)').animate({ marginLeft: '30%' },500);
                    $('nav#main-nav > div#visibleRoutes > ul:nth-of-type(3)').animate({ marginLeft: '30%' },500);
                }, function () {
                    $('nav#main-nav > div#visibleRoutes > ul:nth-of-type(2)').animate({ marginLeft: '0' }, 800);
                    $('nav#main-nav > div#visibleRoutes > ul:nth-of-type(3)').animate({ marginLeft: '0' }, 800);
                });

我试着玩弄

#visibleRoutes ul:nth-child(1):hover{
                ul:nth-child(2){
                   margin-left:30%
                     }
            }

显然没有奏效。任何CSS专家意见？