2016-07-19 58 views
0

我正在爲當前正在構建的網站編寫CSS和HTML,這是我不太熟悉必須編寫的東西。防止重疊更改光標

我有,每個請求,創建了位於屏幕的左側,點擊展開時,部分覆蓋網頁內容,使用戶能夠顯示和隱藏導航不需要的時候一個導航菜單。

當打開時,nav重疊的內容是一堆表,包含可單擊的單元格和可調整大小的列(即,它們將光標更改爲指針,以允許用戶知道他們可以對單元格/表執行某些操作列)

但是,當資產淨值擴大覆蓋網頁內容,我仍然拿起它背後的光標的變化,使它看起來可點擊放錯了位置。

任何人都可以指引我如何防止頁面上的元素拾取它後面的元素上的光標更改的正確方向嗎? 當navBar被打開和關閉時,我可能會動態地使用JavaScript來更改CSS(在打開時移除光標,在關閉時將其添加回去),但是我正在尋找一種更簡單,更通用的修復方法,以便在將來使用。

+0

請添加js提供了一個簡化版本的問題。但我的猜測是你需要z-index。 – Turqueso

+0

你應該提供最小的代碼來重新產生這個問題。它沒有成爲一個「亂動」,你可以直接在你的問題中嵌入一個「代碼片段」。 –

回答

1

聽起來像你需要爲每個元素設置z-index屬性。

如果你創建一個沒有分配的z-index,他們會被自動索引的元素,您創建的任何元素創建後的淨資產值將在默認情況下更高的z-index。

確保所有的元素具有的z-index和資產淨值具有較高的z-index比它就會重疊的元素,例如:

.nav { 
    z-index: 100; 
} 

.el1 { 
    z-index: 99; 
} 

.el2 { 
    z-index: 98; 
} 

等,認爲它是分層的元素如果一個元素具有比另一個元素更高的z-索引,那麼它將在其之上。

+0

這工作得很好。我已經在導航部分設置的z-index爲1,但是當我把它提高到100,它停止拿起它背後的因素。謝謝 – Klutch

0

您可以強制光標是使用cursors CSS屬性(MDN)以一定的方式。見下面,我哪裏逼不在鏈路上的所有元素有規律光標:

*:not(a) { 
    cursor: default 
} 

而且,看到@Nunchy's answer正確配置z-index其實如此這類事情不會發生