移动元素以重新聚焦

Question

晚上好，

我有使用jquery滑动元件的一些问题，我似乎无法隐藏在鼠标活动标签上看到例如

http://cssdeck.com/labs/full/yeopiv4c

Answer 1

您需要更改悬停时活动选项卡的z-index。我这样做是通过给每个幻灯片容器一类叫做slide并使用下面的CSS

.slide { transition:z-index 1.5s; } // Prevent others from showing on close 
.slide:hover { z-index:1; transition:z-index 0s; } // Hide others immediately 

注：这是一个坏实践UI设计，用户希望能够看到他们的选择，并能够在徘徊另一个时选择它们。如果这是我的项目，我会做相反的事情，降低活动选项卡的z-index，以便显示所有其他选项卡图标。

边注：这可都是纯CSS使用过渡完成和少很多的代码（见下文）

Demo，清理，删除不需要的jQuery，代码的缩短量

编辑

如果我们希望它做相反的方式，所有的标签，显示当前选项卡的上方，我们不得不使用一些javascript，可悲的是（因为目前在CSS没有上一个兄弟选择器）

取出容器为tab S/slidewindow S和安置前的各slidewindow的tab在HTML之后，我们可以使用下面的脚本来完成，因为我们希望

var slideWindows = document.getElementsByClassName('slidewindow'), 
    tabs = document.getElementsByClassName('tab'); 

for(var i = 0; i < slideWindows.length; i++) { 
    tabs[i].onmouseover = function() { 
    this.style.right = "200px"; 
    this.nextElementSibling.style.right = "0px"; 
    this.nextElementSibling.style.zIndex = 1; 
    } 
    tabs[i].onmouseleave = function() { 
    this.style.right = "0px"; 
    this.nextElementSibling.style.right = "-200px"; 
    } 
    slideWindows[i].onmouseover = function() { 
    this.previousElementSibling.style.right = "200px"; 
    this.style.right = "0px"; 
    this.style.zIndex = 1; 
    } 
    slideWindows[i].onmouseleave = function() { 
    this.previousElementSibling.style.right = "0px"; 
    this.style.right = "-200px"; 
    this.style.zIndex = 0; 
    } 
} 

Demo