CSS，悬停一个元素，影响另一个元素

当我将鼠标悬停在“li a”上时，我可以影响普通 CSS 中的另一个元素吗？

因为我试图在悬停链接时将一个框作为背景元素滑入。 与此网站导航完全相同，只是不是在激活时使用，而是通过悬停来使用

http://www.zindhai.com http://www.zindhai.com

这是我的代码

nav ul li a:hover{
    color: #C3E1FF;
    font-weight: 700;
}

nav ul li span:hover{
    -webkit-transform:translate(0px, 0px);
    -webkit-transition:all 0.5s ease-out;
    transition:all 0.5s ease-out;
}

nav ul li span{
    height:43px;
    width:300px;
    position: absolute;
    background-color:#47525D;
    -webkit-transform:translate(300px, 0px);
    -webkit-transition:all 0.5s ease-out;
    transition:all 0.5s ease-out;
    background-position:initial initial;
    background-repeat:initial initial;
}

提前致谢！

这就是现在的样子；

http://jsfiddle.net/mbyc3tf9/ http://jsfiddle.net/mbyc3tf9/

如果您需要移动跨度，当您将鼠标放在 a 上时，添加此

nav ul li a:hover > span {}