Adding element on hover w/jQuery

Question

I need to add a box to the end of the div when I hover on that div. The div needs to stay when I roll ontoit from .myDiv and must go away if I click within it or anywhere outside, but not if I click within .myDiv. Also if i hover out from .myDiv the yellow div needs to close.

var yHeight = $(".yDiv").height();

$(".myDiv").hover(
      function () {
        $(this).append($("<div class="yDiv"> ... </div>"));
      }, 
      function () {
        $(this).find(".yDiv").remove();
      }
);


<div class="myDiv" style="width:100px">this is my div</div>

<div class="yDiv" style="display:none;width:100px">this is my div</div>

I need to position yellow div in the middle. I think I got some of it...

enter image description here

CSS? I do use CSS. Can you elaborate? The yDiv will contain it's own content. Kind of like hierarchical menus. I think I'll need to calculate the height of the yDiv and append its middle to myDiv, just not sure how. — santa
– santa, Commented Dec 9, 2011 at 21:18

hunter · Accepted Answer · 2011-12-09 21:23:57Z

2

using a little jQuery and some css this is pretty simple:

JS

normally I would use toggleClass() except for the click event below...

$("#myDiv").hover(
    function() { $(this).find(".yDiv").removeClass("hidden"); },
    function() { $(this).find(".yDiv").addClass("hidden");
});

$(".yDiv").click(function() {
    $(this).addClass("hidden");
});

CSS

.yDiv { background: yellow; display: inline-block; position: absolute }
.yDiv.hidden { display: none; }

HTML

this becomes much easier when the objects are nested

<div id="myDiv">
    ...
    <div class="yDiv hidden">...</div>
</div>

http://jsfiddle.net/hunter/R62U3/

answered Dec 9, 2011 at 21:23

hunter

63.8k19 gold badges115 silver badges115 bronze badges

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

3 Comments

hackartist Over a year ago

I agree that hiding it is probably a better choice than appending and removing it everytime.

santa Over a year ago

OK, hiding if fine. Is it possible to delay the hiding for a second or so when i hover off from myDiv -- it's too jumpy otherwise. For those taking a "shortcut" to yDiv :) Also How do i position it in the middle, relative to myDiv?

hunter Over a year ago

check out jQuery delay() and css left and top and perhaps position: relative

DocileWalnut · Accepted Answer · 2011-12-09 21:28:55Z

1

I'm not entirely sure why you're adding and removing the item when you could just be hiding it.

I would .append() the content once, and then have the hover trigger .hide() and .show(). The overhead of removing and re-creating the nodes for each hover is - while small - unnecessary.

$("#myDiv").append($('<div class="yDiv">');

$("#myDiv").hover(
    function() { $(".yDiv").show() },
    function() { $(".yDiv").hide() }
);

answered Dec 9, 2011 at 21:28

DocileWalnut

2711 silver badge10 bronze badges

Comments

hackartist · Accepted Answer · 2011-12-09 21:23:22Z

0

I would add a new class to both the mydiv and to the yellow div (objects can have as many classes as you want) then apply the hover to that class since right now the yellow div will disappear when you leave mydiv. Then just add a click handler to the yDiv class to make it disappear.

$('.myDiv').addClass('tooltip');
$(".tooltip").hover(
    function () {
        $('.myDiv').append($("<div class='yDiv tooltip' onclick='function(){$('.myDiv').find('.yDiv').remove();}()'> ... </div>"));
    }, 
    function () {
        $('.myDiv').find('.yDiv').remove();
    }
 );

edited Dec 9, 2011 at 21:23

answered Dec 9, 2011 at 21:14

hackartist

5,2745 gold badges36 silver badges50 bronze badges

2 Comments

hunter Over a year ago

blur has to do with the cursor focus

hackartist Over a year ago

use css properties left, and top with position:relative and a z-index of greater than that of mydiv

Collectives™ on Stack Overflow

Adding element on hover w/jQuery

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related