Question

我试图在用户将鼠标悬停在两个不同的div上时添加或删除z-index属性。

问题是我有一些Jquery写的所以它保留了z-index属性，因为鼠标移开了，这是一个平滑的过渡。 https://jsfiddle.net/45wdhdjy/1/

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

我的问题是在将鼠标悬停在蓝色div上后，黄色div在其悬停时无法获得更大的z-index。我有一种感觉，解决方案是将我的两个脚本加入到一个if语句中，但我不确定如何解决这个问题。有人能指出我正确的方向吗？

Answer 1

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

Answer 2

嗯...我尝试了你的代码，这适用于文件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');
});

为每个事件删除另一个div。

Answer 3

你的mouseOver只被触发一次。您应该能够通过在每个div上使用和删除permahover来实现效果。

while($row = $result->fetch_assoc()) {
    echo $row['cat_name'] . ' Latest Post is ' . $row['topic_name'];
}

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

在悬停时添加/删除z-index

3 个答案: