Question

我有一个div，它包含两个图像作为next和prev btn。这些图片为display:none;，当mouseover事件发生时，当鼠标输出事件发生时，这些imga会通过jquery fadeIn()和fadeOut()淡入。问题出在这里，当鼠标移过这些图像时（接下来，Pre），它们会淡出并再次淡入！我希望它们可见，直到鼠标离开div HTML：

＆＃13;

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

＆＃13;

 #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;
 }

＆＃13;

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

＆＃13;

Answer 1

使用mouseenter和mouseleave

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

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


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

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


        });

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

Answer 2

您可以尝试从Check out my updated demo here.库中试用.hover()。

var btn = $(".projNavBtns");

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

当鼠标移过它们时，如何保持我的下一个，prev按钮可见

2 个答案: