Mouseover and mouseleave on outer div

Question

//if ($('.vie_writ_que-user_oth').style == display: 'none') {
  $('p').on('mouseover', function() {
    $(this).closest('.content').find('.textbox').fadeIn(1000)
  });
  $('.textbox').on('mouseleave', function() {
    $(this).fadeOut(1000)
  });
//}

.textbox {
  width: 150px;
  height: 200px;
  border: 1px solid #000;
  overflow: auto;
  float: left;
  display: none;
  margin-top: 60px;
}
.content {
  float: left position: relative;
}
p.a {
  position: absolute;
  left: 30px;
}
p.b {
  position: absolute;
  left: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/bgrins/loremjs/master/lorem.js"></script>
<div class="content">
  <p class="a">hover it</p>
  <div class="textbox paragraphs" data-lorem="3"></div>
</div>
<div class="content">
  <p class="b">Next hover</p>
  <div class="textbox paragraphs" data-lorem="3"></div>
</div>

Hello, Now when you hover on first text box with text will show and the same when you hover on second text and when you mouseleave from box text and box fadeOut.

My question: How make that if mouseover on 'hover it' text box will show but next when I mouseover on 'Next hover' previous text box fadeOut and current text box show. Only one text box can show

I went ahead an used LoremJS in your example to remove the text from your divs. It will now be generated (3 paragraphs) on the fly :) — Mr. Polywhirl, Jan 19 '17 at 20:19

score 1 · Accepted Answer · edited May 23 '17 at 12:16

First of all, you might not want to mix mouseover/mouseout and mouseenter/mouseleave events. They are distinct (for further explanation, refer to this answer). In your case they wouldn't make a lot of difference, but it's always better to follow conventions.

If you want all the textboxes to disappear, all you need to do is listen to the mouseover event on <p>, and force its parents' siblings' textboxes to disappear, i.e.:

$('p').on('mouseover', function() {
    // Show own textbox
    $(this).closest('.content').find('.textbox').stop(true, true).fadeIn(1000);

    // Hide textbox of parents' siblings
    $(this).closest('.content').siblings('.content').find('.textbox').stop(true, true).fadeOut(1000);
});

For a more efficient code, you can store the $(this).closest('.content') object, i.e.:

$('p').on('mouseover', function() {

    // Store parent
    var $parent = $(this).closest('.content');

    // Show own textbox
    $parent.find('.textbox').stop(true, true).fadeIn(1000);

    // Hide textbox of parents' siblings
    $parent.siblings('.content').find('.textbox').stop(true, true).fadeOut(1000);
});

You may notice that I have included the .stop(true, true) method before any of the jQuery animations. The reason being that if you do not stop and the animation, it will queue and "bunch up", resulting in a string of delayed animations that do not apparently sync with user action.

See proof-of-concept example below:

//if ($('.vie_writ_que-user_oth').style == display: 'none') {

$('p').on('mouseover', function() {
  $(this).closest('.content').find('.textbox').stop(true, true).fadeIn(1000);
  $(this).closest('.content').siblings().find('.textbox').stop(true, true).fadeOut(1000);
});

$('.textbox').on('mouseleave', function() {
  $(this).stop(true, true).fadeOut(1000);
});
//}

.textbox {
  width: 150px;
  height: 200px;
  border: 1px solid #000;
  overflow: auto;
  float: left;
  display: none;
  margin-top: 60px;
}
.content {
  float: left position: relative;
}
p.a {
  position: absolute;
  left: 30px;
}
p.b {
  position: absolute;
  left: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <p class="a">hover it</p>
  <div class="textbox">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  </div>
</div>
<div class="content">
  <p class="b">Next hover</p>
  <div class="textbox">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  </div>
</div>

Thanks a lot, big exeprience for me with my short adventure with JS :) — Mat.Now, Jan 19 '17 at 20:26
@V.R You're welcome :) added some missing links, and the explanation of why I've chained `.stop(true,true)` in your jQuery animations — Terry, Jan 19 '17 at 20:28
lat question, because I have not found answer, is option make a delay in jquery not fadeIn() but show any div after e.g. 5 seconds ? because fadeIn() or show() are animations — Mat.Now, Jan 19 '17 at 20:33
@V.R I don't really understand your question, as there is no `.show()` in your example. If you want to delay an animation, just use `.delay()`. Note that `.show()` and `.hide()` are not animations and cannot be chained after delay (they can, but delay will have no effect). — Terry, Jan 19 '17 at 20:34
@Terry I converted your fade-in logic to a jQuery plugin below. — Mr. Polywhirl, Jan 19 '17 at 20:39

Mr. Polywhirl · Answer 2 · 2017-01-19T20:38:49.830

This is pretty easy. Get rid of float, use inline-block instead.

Your classes a, and b should have identical styling, so just use a common class. I chose the name col.

Position your inner-content as absolute.

Note: I borrowed Terry's fade in logic and converted it to a jQuery plugin.

(function($) {
  $.fn.onHoverShowOnly = function(options) {
    var defaults = {
      contentSelector : '',
      targetSelector : '',
      fadeDuration : 1000
    }
    options = $.extend(true, defaults, options || {});
    this.on('mouseover', function() {
      var $parent = $(this).closest(options.contentSelector);
      $parent.find(options.targetSelector)
        .stop(true, true)
        .fadeIn(options.fadeDuration);
      $parent.siblings(options.contentSelector)
        .find(options.targetSelector)
        .stop(true, true)
        .fadeOut(options.fadeDuration);
    });
    $(options.targetSelector).on('mouseleave', function() {
      $(this).fadeOut(options.fadeDuration);
    });
  }
})(jQuery);

$('p.col').onHoverShowOnly({
  contentSelector : '.content',
  targetSelector : '.textbox'
});

div.content {
  display: inline-block;
  position: relative;
  width: 48%;
}
p.col {
  position: absolute;
  top: 0;
  left: 0;
}
div.textbox {
  display: none;
  position: absolute;
  top: 2em;
  width: 150px;
  height: 200px;
  margin-top: 1em;
  border: 1px solid #000;
  overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/bgrins/loremjs/master/lorem.js"></script>
<div class="content">
  <p class="col">Hover it</p>
  <div class="textbox paragraphs" data-lorem="3"></div>
</div>
<div class="content">
  <p class="col">Next hover</p>
  <div class="textbox paragraphs" data-lorem="3"></div>
</div>

score 0 · Answer 3 · answered Jan 19 '17 at 20:35

You can do the same with a lot less jQuery code:

  
  $(document).on('mouseenter mouseleave','p', function () {
     $(this).siblings('.textbox').fadeToggle(1000) ; 
  })

.textbox
{
  width:150px;
  height:200px;
  border:1px solid #000;
  overflow:auto;
  float:left;
  display:none;
  margin-top:60px;
  position:absolute;
  }
.content
{
  float:left;
  position:relative;
  width: 50%;
  display:block;
  height: 300px;
}

p.a
{
  position:absolute;
  left:30px;
  }
p.b
{
  position:absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <p class="a"> hover it</p>
  <div class="textbox">Lorem Ipsum is simply dummy text of the printing and           typesetting industry. Lorem Ipsum has been the industry's standard dummy text     ever since the 1500s, when an unknown printer took a galley of type and           scrambled it to make a type specimen book.
  </div>
</div>
<div class="content">
  <p class="b"> Next hover</p>
  <div class="textbox">Lorem Ipsum is simply dummy text of the printing and           typesetting industry. Lorem Ipsum has been the industry's standard dummy text     ever since the 1500s, when an unknown printer took a galley of type and           scrambled it to make a type specimen book.
  </div>
</div>

Mouseover and mouseleave on outer div

3 Answers3