CSS, hover one element, affect another

Question

When i hover a "li a" can i then affect another element in plain CSS?

becuase I'm trying to make a box slide in, as a background element, when hovering my link. Exactly like this sites navigation, just instead of when activated, it works with hover

http://www.zindhai.com

this is my code

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;
}

thanks in advance!

This is how it looks now;

http://jsfiddle.net/mbyc3tf9/

Answer 1

If you need move the span, when you put your mouse over the a, add this

nav ul li a:hover > span {}

Answer 2

Yeah it's pretty easy to do. Assuming your HTML is called something like .myElement for example. All you need to do is...

nav ul li a:hover .myElement { ... }

Then enter your CSS inside the { }.