CSS, hover one element over another

Question

When I find "li a", can I affect another element in plain CSS?

becuase I'm trying to make a window slide as a background element when I hover over my link. Just like navigating through these sites, and not when activated, it works with freezing

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!

Here's what it looks like now:

http://jsfiddle.net/mbyc3tf9/

Answer 1

If you need to move the range when you hover over a, add this

nav ul li a:hover > span {}

Answer 2

, . , HTML - .myElement, . , , ...

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

CSS { }.