懸停時添加/刪除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

回答

相關問題