如何保持所有元素之上時懸停

我在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。我很想避免divs在屏幕角落的重疊。

不是那麼容易解釋：看看這個小提琴：https://jsfiddle.net/LswbL5qL/

來源

2016-03-01 Federico

可能會更容易轉換爲JavaScript和以此爲基礎進行計算光標位置與窗口高度/寬度相比較。 –

感謝@SetSailMedia我太新手了，就像這樣編碼：/ – Federico

我不是100％肯定我明白你的權利，但這裏是我的解決方案反正=））

刪除那些瘋狂的z-index。 10003太多了。像5東西是不夠

您需要提高懸停的z-index，所以加

div:hover { 
    z-index: 10 !important 
}

你的CSS。之後，一旦你將鼠標懸停在任何div上，它就會成爲其他人的「主」，對其他人也是如此。希望這正是你在找什麼

來源

2016-03-01 19:12:34 Paradoxetion

這就像一個魅力！非常感謝@Paradoxetion;） – Federico

不客氣=）） – Paradoxetion

下面是與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

來源

2016-03-01 19:17:09 Leventix

如何保持所有元素之上時懸停

回答

相關問題