Question

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元素中，而不是全部。如果使用鼠标选择第二个，这不应该消失，就像在这种情况下，你应该有可能在凭证 - 弹出窗口中选择一些东西。这是什么错误？

Answer 1

使用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>

Answer 2

你应该使用正确的jQuery调用，因为你使用的是jQuery，所以不需要为这么简单的工作编写JavaScript函数。我已经在JSFiddle中为您制作了解决方案：https://jsfiddle.net/c8dh5qbk/2/

HTML：

<div class="credentials-element">
  <div class="ct-el-color"></div>
  <div class="credentials-popup">Something</div>
</div>
<div class="credentials-element">
  <div class="ct-el-color"></div>
  <div class="credentials-popup">Something else</div>
</div>

JavaScript的：

$(document).ready(function(){
    $('.credentials-element').mouseover(function() {
    if (!$(this).children('.credentials-popup').is(":visible")) {
      $(this).children('.credentials-popup').slideDown(800);
    }
  }).mouseout(function() {
    if ($(this).children('.credentials-popup').is(":visible")) {
        $(this).children('.credentials-popup').slideUp(800);
    }
  });
});

CSS：

.credentials-element {
  max-width: 1170px;
  margin-bottom: 80px;
}
.ct-el-color {
  height: 50px; 
  background-color: coral;
}
.credentials-popup{
  display: none;
  max-width: 1170px;
  background-color: #DD3330;
  color: #ffffff;
  height: 50px;
  padding:10px 0;
  text-align: center;
}

虽然没有留下选定的课程，但SlideUp会上升

2 个答案: