悬停时添加/删除z索引

adding/removing z-index on hover

本文关键字：索引 删除 添加 悬停      更新时间：2023-09-26

当用户悬停在两个独立的div上时，我正试图在它们上添加或删除z-index属性。

问题是，我写了一些Jquery，这样它就可以在鼠标移开时保留z-index属性，这样就可以实现平稳的转换。https://jsfiddle.net/45wdhdjy/1/

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

我的问题是，在悬停在蓝色div上之后，黄色div的悬停上没有更大的z索引。我觉得解决方案是将我的两个脚本合并为一个if语句，但我不确定如何进行。有人能为我指明正确的方向吗？

只需使用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

好吧。。。我试过你的代码，这在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');
});

对于每个事件，移除另一个类。

您的mouseOver只触发一次。你应该能够通过使用和删除每个潜水器上的permahover来达到效果。

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

每次通话前。请看这把小提琴https://jsfiddle.net/45wdhdjy/1/

相关文章：