Reputation: 6130
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
Reputation: 362
.Out {
display:none;
color:black;
text-decoration:none;
}
.Out:hover {
display:inline:
color:red;
}
Upvotes: 0
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
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
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
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
Reputation: 9593
What about using opacity?
.outOfSight {
opacity: 0;
color: black;
}
.outOfSight:hover {
opacity: 1;
}
Upvotes: 2