大佬教程收集整理的这篇文章主要介绍了Jquery – 突出显示div / greout out of page，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
jQuery(document).ready(function ($) {
$('.entry-content').mouSEOver(function(e) {
$('.expose').mouSEOver(function(e){
$(this).css('z-index','99999');
$('#overlay').fadeIn(300);
});
});
$('.entry-content').mouseleave(function(e) {
$('.expose').mouseleave(function(e){
$('#overlay').fadeOut(0,function(){
$('.expose').css('z-index','1');
});});});});
HTML看起来像
<div id="overlay">
<div class="entry-content">
<div class="expose">something</div>
<div class="expose">something</div>
<div class="expose">something</div>
</div>
#overlay {
background:rgba(0,0.3);
display:none;
width:100%; height:100%;
position:absolute; top:0; left:0; z-index:99998;
}
我所追求的是只要用户在入口内容div上盘旋,让页面变灰并突出显示他正在盘旋的div.
有任何想法吗？
谢谢
通常,元素必须是相同堆叠上下文的一部分,以便比较它们的z-index值.您可以了解有关堆叠上下文here的更多信息.
一些额外的要点：
>您应该使叠加层对指针事件透明.你可以使用pointer-events：none;
>当容器被鼠标悬停时,您不需要绑定到.expose.将处理程序与处理程序并行绑定以显示/隐藏叠加层
CSS：
#overlay {
background:rgba(0,0.3);
display:none;
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
z-index:99998;
pointer-events:none
}
.expose{
background-color:red;
position:relative;
}
JS：
$('.entry-content').hover(function() {
$('#overlay').fadeIn(300);
},function() {
$('#overlay').fadeOut(300);
});
$('.expose').hover(function(e) {
$(this).css('z-index','99999');
},function(e) {
$(this).css('z-index','1');
});
以上是大佬教程为你收集整理的Jquery – 突出显示div / greout out of page全部内容，希望文章能够帮你解决Jquery – 突出显示div / greout out of page所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。