如何將懸停效果應用於Z-index應用div？

<html> 
<head> 
<title>HOver</title> 
<style> 
    .1 { 
     position:fixed; 
     top:0; 
     hieght:100; 
     width:100; 
    } 
    .2 { 
     position:relative; 
     top:0; 
     Z-index:9999; 
     hieght:100; 
     width:100; 
     background-color:white; 
    } 
    .2:hover { 
     background-color:black; 
     color:white; 
    } 
</style> 
</head> 
<body> 
<div class="1">fdigiuguisagcuiagi</div> 
<div class="2">cuoisgdcahouio</div> 
</body> 
</html>

懸停在此代碼中不起作用。如果我刪除Z-index，懸停正在工作。如何將懸停效果應用於Z-index應用div？

我該如何爲這段代碼應用懸停？

來源

2017-08-29 Shaik

試着改變你的類的字母而不是數字，所以你可以說.one和.two – RasmusGlenvig

數字類別不起作用 – masterpreenz

使用javascript，onmouse輸入，因爲mouseover不會對具有z-index更高層的元素落後或更低的元素起作用。 – bdalina

檢查現在再次

.first { 
 
     position:fixed; 
 
     top:0; 
 
     height:100; 
 
     width:100; 
 
     color:blue; 
 
     z-index:99999; 
 
    } 
 
    .second { 
 
     position:relative; 
 
     top:25px; 
 
     z-index:9999; 
 
     height:100px; 
 
     width:100px; 
 
     background-color:red; 
 
    } 
 
    .third { 
 
     position:relative; 
 
     top:50px; 
 
     z-index:9999; 
 
     height:500px; 
 
     width:500px; 
 
     background-color:green; 
 
    } 
 
    .second:hover,.third:hover { 
 
     background-color:black; 
 
     color:white; 
 
    }

<div class="first">fdigiuguisagcuiagi</div> 
 
<div class="second">cuoisgdcahouio</div> 
 
<div class="third">cuoisgdcahouio</div>

來源

2017-08-29 08:07:17 Gattbha

感謝您的回覆。但在這裏我們只有2個div。當我們創建一個網站時，如果我們設置標題是固定的，那麼我們必須將z-index應用於所有其他div。在這種情況下，懸停不適用於其餘的div。 – Shaik

https://jsfiddle.net/rxkf456n/檢查這個小提琴你可以刪除z-index到其他div和它的工作 – Gattbha

謝謝，它的工作.. – Shaik

更正你的錯誤和代碼將工作：

<html> 
 
<head> 
 
<title>HOver</title> 
 
<style> 
 
    /*error class name should not start with a digit*/ 
 
    .div-1 { 
 
     position:fixed; 
 
     top:0; 
 
     height:100px;/*misspelling - hieght*/ 
 
     width:100px;/*you must specify the measurement unit px, %, em, rem, vh, vw*/ 
 
    } 
 
    .div-2 { 
 
     position:relative; 
 
     top:0; 
 
     /*Z-index:9999;*/ 
 
     height:100px; 
 
     width:100px; 
 
     background-color:white; 
 
    } 
 
    .div-2:hover { 
 
     background-color:black; 
 
     color:white; 
 
    } 
 
</style> 
 
</head> 
 
<body> 
 
<div class="div-1">fdigiuguisagcuiagi</div> 
 
<div class="div-2">cuoisgdcahouio</div> 
 
</body> 
 
</html>

來源

2017-08-29 08:12:51 kizoso

如何將懸停效果應用於Z-index應用div？

回答

相關問題