javascript - 尽管尚未离开选定的类(class)，但SlideUp上升了

function hoverimgon(elem){
             $(elem).find('.credentials-popup').slideDown(800);
    }

    function hoverimgoff(elem){
            $(elem).find('.credentials-popup').slideUp(800);
    }
      

.credentials-element {
  max-width: 1170px;
  margin-bottom: 80px;
}


.ct-el-color {
  height: 250px;
  background-color: coral;
}

.credentials-popup{
  display: none;
  max-width: 1170px;
  background-color: #DD3330;
  color: #ffffff;
  height: 250px;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="credentials-element" onmouseover="hoverimgon(this)" onmouseout="hoverimgoff(this)">
            <div class="ct-el-color"></div>

            <div class="credentials-popup">
                Something
            </div>
      </div>

      <div class="credentials-element" onmouseover="hoverimgon(this)" onmouseout="hoverimgoff(this)">
            <div class="ct-el-color"></div>

            <div class="credentials-popup">
                Something
            </div>
      </div>

尽管尚未离开选定的班级，但SlideUp会上升。尽管几个元素具有相同的类，但第二个div应该仅与mouseover元素一起出现，而不与所有元素一起出现。如果使用鼠标选择了第二个，则不会消失，就像是这种情况一样，您应该可以在凭据弹出窗口中选择某些内容。怎么了

最佳答案

使用jQuery :visible Selector并在鼠标离开隐藏的消息区域时将其隐藏。

function hoverimgon(elem) {
  var $slide = $(elem).find('.credentials-popup');
  if (!$slide.is(":visible")) { // only slide down if hidden
    $slide.slideDown(800)
  }
}

function hoverimgoff(elem) {
  if ($(elem).is(":visible")) { // only slide up if visible
    $(elem).slideUp(800);
  }
}

.credentials-element {
  max-width: 1170px;
  margin-bottom: 80px;
}

.ct-el-color {
  height: 250px;
  background-color: coral;
}

.credentials-popup {
  display: none;
  max-width: 1170px;
  background-color: #DD3330;
  color: #ffffff;
  height: 250px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="credentials-element" onmouseover="hoverimgon(this)">
  <div class="ct-el-color"></div>
  <div class="credentials-popup" onmouseout="hoverimgoff(this)">
    Something
  </div>
</div>

<div class="credentials-element" onmouseover="hoverimgon(this)">
  <div class="ct-el-color"></div>
  <div class="credentials-popup" onmouseout="hoverimgoff(this)">
    Something
  </div>
</div>