Question

我将屏幕划分为4个部分

#left {
position: fixed;
top: 50px;
left: 50px;
height: calc(100vh - 100px);
width: 25%;
cursor: url(img/extra/cursors/left.png), auto;
z-index: 10003;
}

#right {
position: fixed;
top: 50px;
right: 50px;
height: calc(100vh - 100px);
width: 25%;
cursor: url(img/extra/cursors/right.png), auto;
z-index: 10003;
}

#up {
position: fixed;
top: 50px;
left: 50px;
height: 25%;
width: calc(100% - 100px);
cursor: url(img/extra/cursors/up.png), auto;
z-index: 10003;
}

#down {
position: fixed;
bottom: 50px;
left: 50px;
height: 25%;
width: calc(100% - 100px);
cursor: url(img/extra/cursors/down.png), auto;
z-index: 10003;

}

当您：悬停每个部分时，光标将变为箭头，当您点击时，您可以向上/向左/向下/向右浏览页面。

我担心的是，我希望屏幕的上半部分由#up覆盖，所有底部由#down覆盖，所有左侧由#left覆盖，所有右侧由#right覆盖。我希望避免屏幕角落里div的重叠。

解释起来不那么容易：看看这个小提琴：https://jsfiddle.net/LswbL5qL/

Answer 1

我并非100％确定我理解你是对的，但无论如何这里是我的解决方案=））

删除那些疯狂的z-index。 10003太多了。像5这样的东西就足够了
你需要在悬停时提升z-index，所以添加
```
div:hover {
  z-index: 10 !important
}
```

到你的CSS。在那之后，一旦你将鼠标悬停在任何div上 - 它将成为＆＃34; main＆＃34;对他人和对他人也一样。希望它正是您所寻找的

Answer 2

这是SVG的解决方案：

<svg width="100%" height="100%" viewBox="0 0 100 100">
  <polygon id="up" points="0,0 50,50 100,0"/>
  <polygon id="left" points="0,0 50,50 0,100"/>
  <polygon id="right" points="100,0 50,50 100,100"/>
  <polygon id="down" points="0,100 50,50 100,100"/>
</svg>

CSS：

html, body { margin:0; padding:0; overflow:hidden }
svg { position:fixed; top:0; bottom:0; left:0; right:0 }
polygon { fill: transparent; }
#left {
    cursor: url(http://www.thisisfed.com/img/extra/cursors/left.png), auto;
    z-index: 10003;
}
#right {
    cursor: url(http://www.thisisfed.com/img/extra/cursors/right.png), auto;
    z-index: 10003;
}
#up {
    cursor: url(http://www.thisisfed.com/img/extra/cursors/up.png), auto;
    z-index: 10003;
}
#down {
    cursor: url(http://www.thisisfed.com/img/extra/cursors/down.png), auto;
    z-index: 10003;
}

Jsfiddle

如何在悬停时将所有元素保持在顶部

2 个答案: