CODEWITHSUNDEEP
htmlcsshover
nold
nold

Reputation: 498

how to achieve a similar hover effect in this website

how do you achieve the effects when you hover the links at top(HOME,ABOUT , JOBS) which you can see in http://www.webdesignerwall.com/ , can someone give me a hint ? or any?

Upvotes: 1

Views: 424

Answers (9)

akamike
akamike

Reputation: 2158

Each link (#nav li a) contains the nav item text plus an additional span which is set to "display:none" by default. The span also has a set of other styles relating to its position and background-image (which is the text that appears).

On #nav li a:hover the span becomes display:block, which makes it visible at the defined position. No scripting needed.

HTML

<ul id="nav">
  <li><a href="index.html">Home <span></span></a></li>
  <li><a href="about.html">About <span></span></a></li>
  <li><a href="jobs.html">Jobs <span></span></a></li>
</ul>

CSS:

#nav li a span{display:none}
#nav li a:hover span{display:block}

This is a completely stripped down version of course, you will need to add your own positioning and other styles as appropriate.

Upvotes: 2

mouviciel
mouviciel

Reputation: 67831

A pure CSS solution is explained on Eric Meyer site: Pure CSS Popups 2.

Upvotes: 0

Kevin Carmody
Kevin Carmody

Reputation: 2319

A lot of people here are far too quick to whip out the scripting languages. Tsk, tsk. This is achievable through CSS. I'd even be inclined to say that there is no need for additional mark-up. One could use a background image on the :hover state. Simple.

Upvotes: 3

Jonny Haynes
Jonny Haynes

Reputation: 3186

The way it's achieved is by using an empty <span>.

It's positioned off screen by default and move into view on hover

Like so:

<ul>
    <li><a href="#">Link<span>&nbsp;</span></a></li>
    <li><a href="#">Link<span>&nbsp;</span></a></li>
    <li><a href="#">Link<span>&nbsp;</span></a></li>
</ul>

And the CSS:

ul li a {
    display: relative;
    }

ul li a span {  
    position: absolute;
    top: -50px; /* or however much above the a you need it to be */
    left: -1000em;
    }

ul li a:hover span {
    left: 0;
    }

Upvotes: 1

Aaron
Aaron

Reputation: 4614

In this particular instance, the developer placed a span tag inside the li elements that make up the menu. That span has (most notably) these properties:

  • height: 33px;
  • top: -26px;
  • left: this varies to position the spans properly
  • position: absolute;

After that, just some JavaScript to make the span appear/disappear.

Upvotes: 0

Sampson
Sampson

Reputation: 268324

There are many, many ways this could be acheived. The simplest would be to have each navigation item change the above image to reflect its corresponding graphic.

<div class="hoverImages">
  <img src="blank.jpg" style="display:none;" />
</div>

<ul>
  <li class="home">Home</li>
  <li class="about">About</li>
  <li class="contact">Contact</li>
</ul>

-- jQuery

$("li.home").hover(
  function () {
    $(".hoverImages img").attr("src", "hoverHome.jpg").show();
  },
  function () {
    $(".hoverImages img").hide();
  }
);

Upvotes: 1

Josh
Josh

Reputation: 6322

by the fact that you can rollover the whole area when on rollover i would suggest that it is simply an alternative background that appears on rollover using css. the elements themselves might then be positioned absolutely within the navigation container.

Upvotes: 0

rosscj2533
rosscj2533

Reputation: 9323

Using jQuery you would just do something like 

$(#MenuId).hover(function() { // show hidden image}, 
    function() { // hide hidden image});

Upvotes: 0

John
John

Reputation: 2042

It is probably a script on the Home, About and Jobs links that makes a floating div tag visible on mouseover and invisible on mouseout.

Here is a simple code example achieving a similar effect:

<html>
  <body>
    <a onmouseover="document.getElementById('my-hidden-div').style.display='block'" onmouseout="document.getElementById('my-hidden-div').style.display='none'">Hover Over This</a>
    <div style="display:none" id="my-hidden-div">and I appear.</div>
  </body>
</html>

Upvotes: 0

Related Questions