Как сохранить мои следующие, предыдущие кнопки видимыми, когда мышь переместится над ними

Question

У меня есть div, который содержит два изображения в следующем и пред btn. эти изображения display:none;, и когда mouseover событие произойдет, эти имги исчезнут в jQuery fadeIn() и fadeOut(), когда событие mouseout произойдет. Проблема здесь, когда мышь просматривает эти изображения (далее, Pre), они исчезают и снова исчезают! Я хочу, чтобы они были видны до мыши отпуск сНа HTML:

$("#showBoxDiv").mouseover(function(){ 
 
      $(".projNavBtns").fadeIn(1000); 
 
     }); 
 
      $("#showBoxDiv").mouseout(function(){ 
 
      $(".projNavBtns").fadeOut(1500); 
 
     });

#showBoxDiv{ 
 
    position: fixed; 
 
    z-index: 10000; 
 
    width: 950px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    height:550px; 
 
    left: 50%; 
 
    margin-left: -475px; 
 
    top:50% ; 
 
    margin-top: -275px; 
 
    background-color: white; 
 
} 
 
#nextBtnImg{ 
 
    position: absolute; 
 
    top: 50%; 
 
    margin-top: -16px; 
 
    right: 5px; 
 
} 
 
#preBtnImg{ 
 
    position: absolute; 
 
    top: 50%; 
 
    margin-top: -16px; 
 
    left: 5px; 
 
} 
 
.projNavBtns{ 
 
    display: none; 
 
    z-index: 10000; 
 
    cursor: pointer; 
 
    overflow: hidden; 
 
}

<div id="showBoxDiv"> 
 
    
 
     <img src="images/next.png" id="nextBtnImg" class="projNavBtns" alt="next" title="next" /> 
 
     <img src="images/pre.png" id="preBtnImg" alt="previous" class="projNavBtns" title="previous" /> 
 
</div>

Answer 1

использование MouseEnter и MouseLeave

$("#showBoxDiv").mouseenter(function(){ 

      $(".projNavBtns").fadeIn(1000); 


     }); 
      $("#showBoxDiv").mouseleave(function(){ 

      $(".projNavBtns").fadeOut(1500); 


     }); 

https://jsfiddle.net/4vwp4z15/1/

Answer 2

Вы хотели бы попробовать .hover() из jquery библиотека.

var btn = $(".projNavBtns"); 

$("#showBoxDiv").hover(
    function(){$(btn).fadeIn(1000);}, //handle in 
    function(){$(btn).fadeOut(1500);} //handle out 
);