Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: jQuery Mouse
I want to an j-query, which on bringing mouse at a place can show hidden text. it is their in the twitter.
Posted 27-Mar-12 22:29pm
Edited 28-Mar-12 8:57am
v2
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

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); //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
  Permalink  
v5
Comments
RaisKazi at 28-Mar-12 20:53pm
   
My 5.
SAKryukov at 28-Mar-12 21:09pm
   
Thank you, Rais.
--SA
ProEnggSoft at 29-Mar-12 1:30am
   
Nice. +5
SAKryukov at 29-Mar-12 10:51am
   
Thank you.
--SA
Monjurul Habib at 30-Mar-12 4:53am
   
5!
SAKryukov at 30-Mar-12 11:16am
   
Thank you, Monjurul.
--SA
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Ok, so read the documentation http://api.jquery.com/hover/[^]
  Permalink  

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

  Print Answers RSS
0 OriginalGriff 277
1 Maciej Los 210
2 BillWoodruff 205
3 Jochen Arndt 180
4 Sergey Alexandrovich Kryukov 165
0 OriginalGriff 5,130
1 DamithSL 4,157
2 Maciej Los 3,650
3 Kornfeld Eliyahu Peter 3,460
4 Sergey Alexandrovich Kryukov 2,811


Advertise | Privacy | Mobile
Web04 | 2.8.141216.1 | Last Updated 28 Mar 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100