CODEWITHSUNDEEP
htmlcss
PTBNL
PTBNL

Reputation: 6130

How can I hide a link and reveal it onhover?

What I want is to use HTML and CSS (no JavaScript) to create a link that only appears when the mouse pointer hovers over it. Attempts to use CSS' display: none and then switch to display:block for mouse hovers haven't worked for me. That's also true for switching visibility: hidden to visibility: visible for hovering. In both cases, the link is invisible, but hovering over where it should be doesn't make it appear.

Thus, I've resorted to simply setting the foreground color to match the background color. Crude but effective for now, but that means I have to make sure both settings are updated if the color scheme changes. A simple example:

HTML:

<p> Lorem ipsum sum blah blah blah <a class="outOfSight" href="#theLink">the link</a></p>
<ul>
    <li>Just</li>
    <li>some</li>
    <li>nonsense</li>
    <li>to</li>
    <li>take</li>
    <li>up</li>
    <li>space</li>
</ul>
<br>
<a name="theLink">destination</a>
You have reached your destination!

CSS:

.outOfSight {
    color: white;
}
.outOfSight:hover {
    color: black;
}

It's also at http://jsfiddle.net/Bc4pB/4/.

Is this the only way? Or is there some subtlety to either the display or visibility property I don't know? Is there another way?

Upvotes: 0

Views: 325

Answers (6)

rolory
rolory

Reputation: 362

.Out {
display:none;
color:black;
text-decoration:none;
}
.Out:hover {
display:inline:
color:red;
}

Upvotes: 0

Soturi
Soturi

Reputation: 1496

Here is an example in JSFiddle.

Surround the anchor in a <span>, and then apply the hidden to the child of the span as so:

<p> Lorem ipsum sum blah blah blah
    <span class="outOfSight"><a href="#theLink">the link</a></span>
</p>
<ul>
    <li>Just</li>
    <li>some</li>
    <li>nonsense</li>
</ul>
<br>
<a name="theLink">destination</a>
You have reached your destination!

Then your CSS would be:

.outOfSight { display: inline-block; }
.outOfSight a {
    visibility: hidden;
}
.outOfSight:hover a {
    visibility: visible;
}

Upvotes: 0

Ozan Batuhan Ceylan
Ozan Batuhan Ceylan

Reputation: 372

I think it will work for you.

CSS

.outOfSight {
    display:inline-block;
    text-indent:-9999px;
}
.outOfSight:hover {
    text-indent:0;
}

More about text-indent property http://www.w3schools.com/cssref/pr_text_text-indent.asp

Upvotes: 0

robbclarke
robbclarke

Reputation: 749

Without using something like jQuery, that's going to be your only answer.

Setting it to 'visibility:hidden' or 'display:none' take away the interactivity. 'display:none' just completely hides it like it's not there while 'visibility:hidden' keeps its 'mass' but hides it from sight but unfortunately takes away all of the interactivity.

Someone else suggested using opacity, which would work but it's not super browser friendly (if you're supporting the less fortunate that are still using older IEs).

Upvotes: 1

Explosion Pills
Explosion Pills

Reputation: 191829

You can't hover over something that is not there (visibility and display can both take the element out). I would just set opacity: 0 / opacity: 1.

Upvotes: 1

Derek Story
Derek Story

Reputation: 9593

What about using opacity?

.outOfSight {
    opacity: 0;
    color: black;
}
.outOfSight:hover {
    opacity: 1;
}

JS Fiddle

Upvotes: 2

Related Questions