Run .hover() inside variable jquery

Question

I'm just trying to write some code like this:

var clickAction = function(){
    $('#OL_Icon_55').append("<em class='well'>Hello World</em>");
}
$("body").one("mouseenter",clickAction);

And I want to hide Hello World string when mouse hover around #OL_Icon_55, than the code will be look like this :

var clickAction = function(){
    $('#OL_Icon_55').append("<em class='well'>Hello World</em>", function() {
        $(this).hover(function () {
            $(".well").hide();
        });
    });
}
$("body").one("mouseenter",clickAction);

But that is not working for me. Does anyone have a little more idea or correct that code so that hover function can work?

The append method doesn't have a callback. Also FYI hover() is going to deprecated in the next jQuery. — elclanrs
– elclanrs, Commented Aug 8, 2012 at 21:18
Why would you want to do this anyway? Why an event just once on body? Something seems wrong with your logic... — elclanrs
– elclanrs, Commented Aug 8, 2012 at 21:22

Brian Ustas · Accepted Answer · 2012-08-08 21:21:24Z

1

Have a look at this fiddle.

'Hello World' will be shown if the mouse is inside #OL_Icon_55.

Here's the JS:

var $OL = $('#OL_Icon_55'),
    $span = $("<span class='well'>Hello World</span>");

$("body").one("mouseenter", function() {
    $OL.append($span);
});

$OL.mouseenter(function () {
    $span.show();
}).mouseout(function () {
    $span.hide();
});

answered Aug 8, 2012 at 21:21

Brian Ustas

66k3 gold badges30 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

wirey00 · Accepted Answer · 2012-08-08 21:39:54Z

1

Stole most the code from @depot. But much shorter

$(function(){  // <-- on dom ready
    var $OL = $('#OL_Icon_55'),
    $span = $("<span class='well'>Hello World</span>");  

    $("body").one("mouseenter", function() {  // <-- on one mouse enter
        $OL.append($span);  // <-- append span
    });

    $OL.hover(function () {  // <-- on hover
        $span.toggle();  // <-- toggle (show/hide) span
    });   
});

http://jsfiddle.net/EeGYs/3/

edited Aug 8, 2012 at 21:39

answered Aug 8, 2012 at 21:32

wirey00

33.7k7 gold badges56 silver badges65 bronze badges

1 Comment

Evandro Silva Over a year ago

liked your solution, since doesn't hide the div when you hover over it. +1

Collectives™ on Stack Overflow

Run .hover() inside variable jquery

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related