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/

Please see the instructions on [making a minimal, complete, verifiable example](http://stackoverflow.com/help/mcve) of your problem. — i alarmed alien, Oct 09 '14 at 23:57
http://jsfiddle.net/victor_007/mbyc3tf9/1/ i have added a sub-menu when you `hover` on `li` it will show sub `li` — Vitorino fernandes, Oct 10 '14 at 11:33
Okay, but that's not my problem, it's the box on the right, that i need to slide in, when hovering on the li — Tobias Madsen, Oct 10 '14 at 11:35
possible duplicate of [How to affect other elements when a div is hovered](http://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered) — kittykittybangbang, Feb 25 '15 at 15:47

score 3 · Accepted Answer · answered Oct 10 '14 at 11:35

3

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

nav ul li a:hover > span {}

answered Oct 10 '14 at 11:35

Javier

103
11

Thank you! it works, but now my a hover effect has dissapeared? – Tobias Madsen Oct 10 '14 at 11:56
1

you need add nav ul li a:hover {} and nav ul li a:hover > span {} – Javier Oct 10 '14 at 12:02
Thanks! it works perfectly :) Actually i need help to another question if you have the time, do you know how i hide the span, so it only appears when hovering the li. Because right now it's visible to the right of the li – Tobias Madsen Oct 10 '14 at 12:12
Yes, add display: none; to nav ul li span and add display:block; to nav ul li a:hover > span – Javier Oct 10 '14 at 21:27
Yep it worked, though the "animation" disappeared, so the span isn't sliding in from the side, it just appears :/ – Tobias Madsen Oct 10 '14 at 22:00
you need add the animation code in the nav ul li a:hover > span – Javier Oct 11 '14 at 14:22
nav ul li a:hover > span{ -webkit-transform:translate(0px, 0px); -webkit-transition:all 0.5s ease-out; transition:all 0.5s ease-out; display:block; } This is my code, and that's not working :/ – Tobias Madsen Oct 11 '14 at 16:03

score 0 · Answer 2 · answered Oct 09 '14 at 23:42

0

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 { }.

answered Oct 09 '14 at 23:42

Dan

152
2
14

could you maybe give me an example with my code above? I've tried several things at it doesn't work. – Tobias Madsen Oct 10 '14 at 10:41
I am having a similar issue with my css. – Tyler Lazenby Apr 01 '15 at 22:42

CSS, hover one element, affect another

2 Answers2

Linked