CSS: hanging outside a div

Question

So, I have my navigation using this code

<ul> <li><a href="#" class="home">Home</a></li> <li><a href="#" class="about">About</a></li> <li><a href="#" class="portfolio">Portfolio</a></li> <li><a href="#" class="photos">Photos</a></li> <li><a href="#" class="contact">Contact</a></li> </ul> <div id="arrow"> </div> 

Whenever I: hang any class a, I want my #arrow to move.

Is there any way to do this? Thanks in advance.:)

Answer 1

This is not possible with CSS. For this you need dynamic scripting. Using :hover , you can manipulate properties on a hovering element, as well as its daughters / grandchildren. #arrow , however, is not nested in any of your list items, and therefore their state :hover cannot determine styles for an arrow element - not directly, at least.

As indicated, you can accomplish this with some dynamic scripting. For example, the following jQuery will perform the effect that you perform:

 $("ul").on("mouseenter mouseleave", "li", function(e){ e.type === "mouseenter" ? $("#arrow").stop().animate({ left: $(this).offset().left, width: $(this).outerWidth(), opacity: 1 }, 500 ) : $("#arrow").stop().animate({ left: 0, width: $("ul li:first").outerWidth(), opacity: 0 }, 750 ); });​ 

Fiddle: http://jsfiddle.net/ZvqPZ/2/

Answer 2

You cannot do this with CSS as indicated. You can use jQuery for example. Use the css class to specify positions and change between classes on hover using jquery.

JQuery

 $("li a").hover( function () { /* on hover over*/ $("#arrow").addClass("moved-pos"); }, function () { /* on hover out*/ $("#arrow").removeClass("moved-pos"); } }); 

CSS

 #arrow{ /*set original position for arrow */ } #arrow.moved-pos{ /*set new position here */ } 

(note that this code is not verified)