2015-07-19 124 views
1

我试图在悬停链接时打开div。这很简单,我做得很好。但我也想在没有关闭的情况下访问div。因此,如果我将鼠标悬停在新打开的div上,它将保持打开状态。但是如果我徘徊在div之外,我希望它关闭。在鼠标上打开div并保持打开状态

我也想确保如果我将鼠标悬停在div关闭的链接之外。我已经做了几次,但在我的生活中,我无法将其排除。我记得以前使用setTimeout,但我的脑子已经糊涂了,所以迟到了,所以我认为我不妨寻求一些帮助。

我也知道mouseentermouseleave会比悬停在这种情况下好得多,我只是将它键入为悬停速度。

UPDATE 更改HTML不是一个选项这是一个jQuery的问题,而不是一个HTML或CSS的一个。

jQuery(document).ready(function($) { 
 
    "use strict"; 
 

 
    $("li.true a").hover(
 
    function() { 
 
     $(".open").fadeIn(1000); 
 
    }, function() { 
 
     $(".open").fadeOut(1000); 
 
    } 
 
); 
 

 
    $(".open").hover(
 
    function() { 
 
     $(this).show(); 
 
    }, function() { 
 
     $(this).fadeOut(1000); 
 
    } 
 
); 
 

 
});
ul, 
 
li { 
 
    list-style: none; 
 
} 
 
li { 
 
    display: inline-block; 
 
} 
 
a { 
 
    display: block; 
 
    padding: 10px; 
 
    background-color: black; 
 
    color: white; 
 
    -webkit-transition: all 0.35s ease-in-out; 
 
    transition: all 0.35s ease-in-out; 
 
    cursor: pointer; 
 
} 
 
a:hover { 
 
    color: black; 
 
    background-color: white; 
 
} 
 
li.true a { 
 
    background-color: green; 
 
} 
 
li.true a:hover { 
 
    background-color: blue; 
 
    color: green; 
 
} 
 
div.open { 
 
    background-color: red; 
 
    width: 100%; 
 
    height: 300px; 
 
    display: none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<nav> 
 
    <ul> 
 
    <li><a>not</a> 
 
    </li> 
 
    <li><a>not</a> 
 
    </li> 
 
    <li class="true"><a>true</a> 
 
    </li> 
 
    <li><a>not</a> 
 
    </li> 
 
    <li><a>not</a> 
 
    </li> 
 
    </ul> 
 
</nav> 
 

 
<div class="open"></div>

+0

为什么不使用CSS:为此悬停?尽可能在JS上使用CSS是个不错的主意。 –

+1

无法使用CSS,因为它不是一个直接的兄弟姐妹,并且在激活器的容器之外 – DCdaz

+0

不要因为对一个不好的答案的批评而投弃权票。 – DCdaz

回答

1

使用这个js它使用超时

jQuery(document).ready(function($) { 
"use strict"; 
var t; 
$("li.true a, .open").hover(function() { 
    clearTimeout (t); 
    $(".open").fadeIn(1000); 
}, function() { 
    clearTimeout (t); 
    t = setTimeout(function(){ 
     $(".open").fadeOut(1000); 
    },1000); 
}); 
}); 
+0

对不起,此代码不会执行任何操作。 – DCdaz

+0

这很奇怪你是否在控制台中出现任何错误 –

+0

现在工作我已经发现你的未更新代码 – DCdaz

1

简单的办法就是不要在jQuery中使用悬停的两个参数。 当悬停在“li.true a”时,只需忽略隐藏div的第二个参数。使用null跳过div.open的悬停。

但如果你问的是正确的方法。使用CSS进行这些类型的交互。 JS不需要这样做。

编辑:如果您需要在“li.true a”的悬停的同胞中隐藏它。

jQuery(document).ready(function($) { 
 
    "use strict"; 
 

 
    $("li.true a").hover(
 
    function() { 
 
     $(".open").fadeIn(1000); 
 
    } 
 
); 
 
    $("li:not(.true) a").hover(
 
    function() { 
 
     $(".open").fadeOut(1000); 
 
    } 
 
); 
 

 
    $(".open").hover(null, function() { 
 
     $(this).fadeOut(1000); 
 
    } 
 
); 
 

 
});
ul, 
 
li { 
 
    list-style: none; 
 
} 
 
li { 
 
    display: inline-block; 
 
} 
 
a { 
 
    display: block; 
 
    padding: 10px; 
 
    background-color: black; 
 
    color: white; 
 
    -webkit-transition: all 0.35s ease-in-out; 
 
    transition: all 0.35s ease-in-out; 
 
    cursor: pointer; 
 
} 
 
a:hover { 
 
    color: black; 
 
    background-color: white; 
 
} 
 
li.true a { 
 
    background-color: green; 
 
} 
 
li.true a:hover { 
 
    background-color: blue; 
 
    color: green; 
 
} 
 
div.open { 
 
    background-color: red; 
 
    width: 100%; 
 
    height: 300px; 
 
    display: none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<nav> 
 
    <ul> 
 
    <li><a>not</a> 
 
    </li> 
 
    <li><a>not</a> 
 
    </li> 
 
    <li class="true"><a>true</a> 
 
    </li> 
 
    <li><a>not</a> 
 
    </li> 
 
    <li><a>not</a> 
 
    </li> 
 
    </ul> 
 
</nav> 
 

 
<div class="open"></div>

+0

只有这部分解决了这个问题。因为除非你输入,否则div保持打开状态。 – DCdaz

+0

仍然最密集的解决,因为现在你有问题,如果你没有悬停链接的div保持打开 – DCdaz

+1

什么时候你想要“div.open”隐藏? – risyasin

-1

你可以只用CSS这样做:

  body{ font-family:sans-serif; } 
      nav { 
       background:blue; 
       padding:12px; 
      } 

      ul { 
       list-style:none; 

      } 
      ul li { 
       display:inline-block; 
       padding:6px; 
       border:1px inset white; 
       cursor:pointer; 
       transition:all .5s; 
       background:red; 
      } 

      ul li:hover { 
       background:white; 
       color:black; 
      } 
      ul ul { 
       display:none; 
      } 
      ul li:hover > ul { 
       display:inherit; 
       position:absolute; 
       top:68px; 
       float:none; 
      } 
      ul ul li { 
       display:inherit; 
       float:none; 
       position:relative; 
       left:-47px; 
      } 

HTML:

<nav> 
      <ul> 
       <li> Example.com </li> 
       <li> Languages 
        <ul> 
         <li> HTML </li> 
         <li> CSS </li> 
         <li> Javascript </li> 
        </ul> 
       </li> 
       <li> Something 
        <ul> 
         <li> Something </li> 
        </ul> 
       </li> 
      </ul> 
     </nav>  
+0

这不是接近我的原始HTML对不起。 – DCdaz

+2

不,但它工作得很好,它消除了无数堆'id's的需要。 – TricksfortheWeb

+0

牦牛没有无尽的堆ID也是这是一个JQuery的问题编辑HTML或CSS将不会被视为解决方案。对不起 – DCdaz

1

与类open移动divli作为孩子的Elemen吨。 JS现在对你的情况也更简单了。你可以在这里找到小提琴:https://jsfiddle.net/ej5gkgat/

<nav> 
    <ul> 
    <li><a>not</a> 
    </li> 
    <li><a>not</a> 
    </li> 
    <li class="true"> 
     <a>true</a> 
     <div class="open"></div> 
    </li> 
    <li><a>not</a> 
    </li> 
    <li><a>not</a> 
    </li> 
    </ul> 
</nav> 

新建CSS:

ul, 
li { 
    list-style: none; 
} 
li { 
    display: inline-block; 
} 
a { 
    display: block; 
    padding: 10px; 
    background-color: black; 
    color: white; 
    -webkit-transition: all 0.35s ease-in-out; 
    transition: all 0.35s ease-in-out; 
    cursor: pointer; 
} 
a:hover { 
    color: black; 
    background-color: white; 
} 
li.true a { 
    background-color: green; 
} 
li.true a:hover { 
    background-color: blue; 
    color: green; 
} 
div.open { 
    position: absolute; 
    background-color: red; 
    width: 300px; 
    height: 300px; 
    display: none; 
} 

新的JS:

jQuery(document).ready(function($) { 
    "use strict"; 

    $("li.true").hover(
    function() { 
     $(".open").fadeIn(1000); 
    }, function() { 
     $(".open").fadeOut(1000); 
    } 
); 
}); 
+0

更改html不是解决方案,如果它只是移动html的问题我不需要使用JS – DCdaz

0

你可以尝试做它没有超时(不的粉丝),但用fadeTo()和stop()

不透明度用于检查可见性并计算估计剩余的褪色时间。 JSFiddle example

jQuery(document).ready(function($) { 
    "use strict"; 

    var fadeout = 1000; 
    var fadein = 800; 

    $("li.true a").hover(function() { 
     var opacity = $(".open").css("opacity"); 
     opacity = opacity && opacity < 0.8 ? opacity : 0; 
     $(".open").stop(true).fadeTo(fadein*(1-opacity), 1); 
    }, function() { 
     var opacity = $(".open").css("opacity"); 
     if (opacity > 0) $(".open").fadeTo(fadeout, 0); 
    });  

    $(".open").hover(function() { 
     var opacity = $(this).css("opacity"); 
     if (opacity > 0) $(this).stop(true).fadeTo(fadein*(1-opacity), 1); 
    }, function() { 
     $(this).fadeTo(fadeout, 0); 
    }); 

}); 
相关问题