jquery slideDown not staying open

Question

I've got a 'learn more' section at the bottom of an image. When you hover over it, it expands another caption div above it explaining more about that particular section where I can put text, links, etc. all of that works fine.

My problem is once you hover, and the secondary div slides open, I can't hover over that without it disappearing. the only solution I can find is making the whole surrounding image element the 'hover' trigger. but I don't want it to display whenever you hover over the image, just when you hover over the 'learn more' bit.

I'm also not a fan of needing to set a timer for it to stay open. It should open when you hover, and close when you leave it. It also has to be able to display back to IE8. My jQuery is very simple so far.

    $( ".learnmore" ).hover( function() {
        $(".moretext").slideDown(600);
    }, function() {
        $(".moretext").slideUp(600);
    });

here's my fiddle (first time using js fiddle so hopefully i'm linking it right. please tell me if it's not): http://jsfiddle.net/adren51407/x7E82/

Answer 1

You can try this:

Example

$( ".imgsurround" ).hover(
  function() {
      //
  }, function() {
    $(".moretext").slideUp(600);
  }
);

The "more text" will slide up when you hover the "learn more" and then only slide down when you're not hovering the whole "imgsurround" div.

UPDATE

You can do it even as you wanted: example 2. Assuming you hovering the "more text" only when it's visible you can apply the slideUp rule on the "more text" div.

$( document ).ready(function() {
    $( ".learnmore" ).mouseover(
      function() {
        $(".moretext").slideDown(600);
      });

    $( ".moretext" ).mouseout(
       function() {
        $(".moretext").slideUp(600);
    });
});

Note that in the second solution when you hovering "learn more" and not hovering the "more text" it will stay visible even if you are no longer hovering both.