效果基本show上升，儘管選擇的類尚未離開

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>

效果基本show上升，儘管選擇的類尚未離開。雖然幾個元素具有相同的類，但第二個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; 
}