将元素移动到焦点上

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的容器并将tab放在HTML中的相应slidewindow之后，我们可以使用以下脚本执行操作我们想要

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