Click here to Skip to main content
15,867,686 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
I want to an j-query, which on bringing mouse at a place can show hidden text. it is their in the twitter.
Posted
Updated 28-Mar-12 7:57am
v2

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:
HTML
<div id="textHider"><!- some content... -></div>


Create some CSS style to hide the content, such as:
CSS
.hiddenText { background-color:yellow; color:yellow; }


C#
myElement = $("#textHider");
className = "hiddenText";
myElement.addClass(className); //hide
myElement.hover(
    function() { //on mouse pointer getting in the element area
        $(this).removeClass(className); //show
    },
    function() { //on mouse pointer going out
        $(this).addClass(className); //hide
    }
);


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
 
Share this answer
 
v5
Comments
RaisKazi 28-Mar-12 20:53pm    
My 5.
Sergey Alexandrovich Kryukov 28-Mar-12 21:09pm    
Thank you, Rais.
--SA
ProEnggSoft 29-Mar-12 1:30am    
Nice. +5
Sergey Alexandrovich Kryukov 29-Mar-12 10:51am    
Thank you.
--SA
Monjurul Habib 30-Mar-12 4:53am    
5!
Ok, so read the documentation http://api.jquery.com/hover/[^]
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900