将鼠标悬停在链接上

Question

I want to create the following action:

When you move your mouse over a piece of text in a navigation bar fixed on the left hand side of the screen, a second piece of text (or an image if that is easier), will appear by sliding out from the left of the page. The second text or image would rest under the first (possible offset for effect). On mouseoff the above effect would reverse and you would be left with only the first piece of text.

I hope that makes sense, i have been trawling transition and hover over effects on the web, but I can't quite find what I have envisioned.

Answer 1

Here's a little something I knocked together for you as an example. It uses jQuery :

The HTML :

<div class="text">
    <a>Text One</a>
    <a>Text Two</a>
</div>

The CSS :

.text{
    width:200px;
    position:relative;
}

.text > a{

    position:relative;
    left:-100%;
    display:none;

}

.text > a:first-child{

  left:0;
  display:block;

}

The JavaScript :

$(document).ready(function(){ // here we're only running the code when the page is ready

    $('.text > a:first-child').hover(function(){ // here we're targeting the first .text element

      $(this).siblings().css('display', 'block'); // we're making it visible
      $(this).siblings().animate({'left':'0%'}); // we're animating it out of it's hidden state

    }, function(){ // this function is passed as the second argument to the 'hover' method

      $(this).siblings().animate({'left':'-100%'}, 500, function(){ // animate back to hidden state

        $(this).css('display', 'none'); // when the animation is complete, hide it completely

    });
  });
});

Here's a working example on jsFiddle.

Obviously the concept could be optimised/developed...