悬停时添加/删除z-index

我试图添加或删除两个单独的div上的z-index属性，因为用户在其上悬停。悬停时添加/删除z-index

捕捉是我写了一些jquery，所以它保持z-index属性，因为鼠标移开了，这是一个平稳过渡。 https://jsfiddle.net/45wdhdjy/1/

$(".w-1").one("mouseover", function() { 
    $(".w-1").addClass('permahover'); 
});

我的问题是盘旋在蓝色的div黄色DIV未能对其悬停更大的z-index之后。我有一种感觉，解决方案是将两个脚本合并成一个if语句，但我不确定如何去解决这个问题。任何人都可以指出我正确的方向吗？

来源

2016-07-28 Max Power

如果你在这里解释你实际想要达到的目标，这将有所帮助。 – Damon

好...我想你的代码，这一点也适用于文件JS

$(".w-1").on("mouseover", function() { 
    $(".w-2").removeClass('permahover2'); 
    $(".w-1").addClass('permahover'); 
}); 

$(".w-2").on("mouseover", function() { 
    $(".w-2").addClass('permahover2'); 
    $(".w-1").removeClass('permahover'); 
});

每个事件删除类的其他分区。

来源

2016-07-28 00:56:47

谢谢你的家伙，简单的解决方案。正如你可能能够告诉我真的需要学习JavaScript。 :) –

只需使用CSS，它的更好，更清洁：

.w-1{z-index:0;} 
.w-1:hover{z-index:1000;}

当然我忽略其他的CSS样式类可能有。该类还必须具有为其定义的position样式，否则z-index将不起作用;

考虑的评论： HTML：

<div class="wrapper"> 
<div class="work-1"></div><div class="work-2"></div> 
</div>

CSS：

.wrapper { 
    display: inline-block; 
    position: relative; 
    width: 60%; 
    transition: all ease 0.4s 
} 

.work-1, .work-2 { 
    transition: all ease 0.4s; 
    width: 50%; 
    height: 300px; 
display:inline-block; 

} 

.work-1 { 
    background-color: #FEF102; 
} 

.work-2 { 
    background-color: #4B3E7F; 
} 

.active{width:100%;} 
.inactive{width:0%;}

JAVASCRIPT：

$('.wrapper div').mouseover(function(){ 
    $('.wrapper div').not($(this)).addClass('inactive'); 
    $(this).addClass('active'); 
}).mouseout(function(){ 
    $('.wrapper div').removeClass('active').removeClass('inactive'); 
});

DEMO

来源

2016-07-28 00:37:03

我原本是这样的，但是z-index并没有过渡，所以当你解开div时它看起来很笨重。不管怎么说，还是要谢谢你。 –

你确切的问题是什么。告诉我所以我可以帮助 –

在jsfiddle结束黄色div，然后蓝色div然后再黄色div。你可以第二次看到黄色的div，z-index不够好，因为jquery改变了蓝色div。我希望将我的两个脚本加入到一个既添加/删除基于div悬停的z-index的脚本中。希望这是有道理的。（必须出去一个小时，以免迟到回复）。 –

你的鼠标悬停只被解雇一次。你应该可以通过在每个div上使用和移除permahover来实现这个效果。

$(.w-2).removeClass('permahover2')

每次调用之前。请参阅此琴https://jsfiddle.net/45wdhdjy/1/

来源

2016-07-28 00:52:54

悬停时添加/删除z-index

回答

相关问题