With jQuery, this is really easy. One of the ways would be hiding by color.
Suppose you need to play this trick on some HTML element, such as
div
:
<div id="textHider"><!- some content... -></div>
Create some CSS style to hide the content, such as:
.hiddenText { background-color:yellow; color:yellow; }
myElement = $("#textHider");
className = "hiddenText";
myElement.addClass(className);
myElement.hover(
function() {
$(this).removeClass(className);
},
function() {
$(this).addClass(className);
}
);
You can use this idea to play with any properties defined in the styles, including visibility.
Please see:
http://api.jquery.com/category/css/[
^].
You can also control visibility of the whole element. Please see:
http://api.jquery.com/hide/[
^],
http://api.jquery.com/show/[
^].
[EDIT]
The last paragraph above, the one with two links, needs clarification. If you hide the same element on which you handle the mouse events, it won't work as you need, because after you hide it, it won't respond to mouse event. What I mean is: you need two nested elements. The outer element should respond to mouse events the way shown in the code above (it that example, this is the
div
element with
id="textHider"
). In the inner HTML of this element should be another one you would hide and show.
—SA