CSS :hover outside a div

Question

So I have my navigation with 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 :hover any a with class, I want my #arrow to move.

Is there a way to do that? Thank you in advance. :)

Answer 1

This is not possible with CSS alone. You would need some dynamic scripting to accomplish that. Using :hover, you can manipulate properties on the element being hovered, as well as its children/grandchildren. #arrow, however, is not nested within any of your list items, and as such their :hover state cannot dictate styles to the arrow element - not directly, at least.

As stated, you can accomplish this with some dynamic scripting. For instance, the following jQuery will accomplish the effect you're after:

$("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 can't do this with CSS as has been stated. You can used jQuery, e.g. Use css class to specifiy the positions and change between the 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 this code is untested)