Move other elements when an element is hovered over

Question

I have three items on a menu: Galleries, Contact and About. When the user hovers over galleries I want contact and about to move down and I am having trouble doing this. Anyone know what I should do?

Here is the HTML that I am using:

<div class="nav" align="center">  
<a style="opacity: 0;" class="nav_item" id="galleries">GALLERIES</a><br><br><br>
<div id="lower">
<a style="opacity: 0;" class="nav_item" id="about">ABOUT</a><br><br><br>
<a style="opacity: 0;" class="nav_item" id="contact">CONTACT</a>
</div>
</div>

Here is the CSS:

#galleries:hover #lower{
top:40%;
-webkit-transition-property:top;
-webkit-transition-duration:0.5s;   
}

EDIT:

I fixed the problem! Thanks everyone for helping!

The problem with your current CSS is that the #lower element is not a child of the #galleries element. — mavrosxristoforos, Sep 25 '13 at 07:53
Seconding @mavrosxristoforos: Try a :hover on .nav (give it an id if needed) — pintxo, Sep 25 '13 at 07:55
Why not set a `margin-bottom` on the `#galleries` (assuming your page flows in a way where this would perform said action... — gvee, Sep 25 '13 at 07:56
I believe he is probably floating these elements next to each other and wants to make it look as if other menu elements are collapsing with your hover. — mavrosxristoforos, Sep 25 '13 at 07:59

score 0 · Answer 1 · edited May 23 '17 at 12:11

0

As far as I know, this is impossible to do with just CSS, since you are trying to adjust sibling elements. (You can find a similar question here)

If I needed to do this, I would do it with the Javascript onmouseover and onmouseout events, or with jQuery (which would simplify your code a lot).

edited May 23 '17 at 12:11

Community

1
1

answered Sep 25 '13 at 07:57

mavrosxristoforos

3,573
2
25
40

Please update your answer instead of posting it here, for others to see it, too. – mavrosxristoforos Sep 25 '13 at 08:50

score 0 · Answer 2 · answered Sep 25 '13 at 09:06

To achieve this, under your current HTML:

#nav:hover ~ #lower a {
    top: 40px;
    -webkit-transition: top 0.5s linear;
}

JS Fiddle demo.

This uses the general-sibling (~) combinator to identify later-siblings (not all siblings) of the #nav:hover element, and animates them.

I've used 40px rather than 40% because a percentage change requires a known-height from the parent, which isn't identified in your question.

Incidentally, all your elements have an opacity of 0 (in your posted HTML), with the exception of the div and br elements, how are your users supposed to identify an interactive component they can't see?

Move other elements when an element is hovered over

2 Answers2