如何将悬停效果应用于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？

回答

相关问题