Juvar Abrera
Juvar Abrera

Reputation: 485

CSS :hover outside a div

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. :)

Upvotes: 4

Views: 4328

Answers (2)

Sampson
Sampson

Reputation: 268424

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/

Upvotes: 6

FluffyKitten
FluffyKitten

Reputation: 14312

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)

Upvotes: 2

Related Questions