Use the adjacent sibling selector to toggle the other div. #div1:hover + #div2 {
//what should happen when hover.
}
the div1 is the text. this doesnt have to be a div. and then after the + the div you want to effect.
I did it this way because of the textured background you're working with..if you were working with a solid background, I'd say go transparent to background color on the gradient, and change the background colors of the <li> tags, as that would cut down on the css involved.
Hello again CSS peeps,
I'm developing a new website for work, and I have wanted to use CSS transitions on the navigation.
Your text to link here...
Ideally I want it so that the coloured blocks are divs coloured with css, and the text be real text.
I couldnt seem to get the blocks to slide down over the text, the rollover wouldn't trigger at all.
Here is an example using a sprite of what I'm trying to achieve (ignore the fact that the text obviously scrolls down due to the sprite.)
Your text to link here...
What I want to do is have the coloured block slide down and COVER the text below it.
Any ideas?
Use the adjacent sibling selector to toggle the other div.
#div1:hover + #div2 { //what should happen when hover. }the div1 is the text. this doesnt have to be a div. and then after the + the div you want to effect.http://jsfiddle.net/6BfR6/307/
@plaedien, what I do for situations like that is use a linear-gradient, then move the background on hover..
http://codepen.io/ChrisPlz/pen/cGvkh
That's an extremely reduced case...
and with diff colors...
http://codepen.io/ChrisPlz/pen/lBpLv
I did it this way because of the textured background you're working with..if you were working with a solid background, I'd say go transparent to background color on the gradient, and change the background colors of the
<li>tags, as that would cut down on the css involved.