jquery animate one element by hover over another

I have a successful (almost) animation in jquery but now need a text saying "click." to appear whenever I hover over a div which is made wider by a over event. The event makes the div wider up开发者_StackOverflowon entering and narrower upon leaving, and this works.

So, what I want is something like this:

if($( this).width() >= "25") //  if the width is greater than 25
    $("#clickme").css('opacity', 0) // - effect a DIFFERENT id which is my "click.."

and of course upon mouse leave, do the opposite. I can't get this to work thus far

I have the jquery portion in paste bin http://pastebin.com/AQwLeBbc

Any clues?

If you want to position a div over another elements, you can use a fixed or absolute positioning with css. You can get the position of the current element that is being hovered upon with:

.offset()

http://api.jquery.com/offset/

Then use offset() to set the position of your hovering div. If you want the div to hover over everything, its best to put it as the first element of the body.

This accomplishes what you want. It uses the .hover() function to assign two handlers to the object, one on mouse in, one on mouse out.

$('.selector').each(function() {
        var clicktext = null;
        $(this).hover(function() {
                var pos = $(this).offset();
                // add the click text and assign it to the proper variable
                // this code can be changed to what ever it takes for your code
                // just make sure to leave the zIndex at a greater than 0 value
                // and the position values as they are. Padding, etc. are optional.
                clicktext = $('<div>').css({
                        zIndex: 1000,
                        padding: "2px",
                        position: "absolute",
                        left: pos.left,
                        top: pos.top
                }).text("click").appendTo('body');
        }, function() {
            clicktext.remove();
        });
});

-Sunjay03