Question

<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>

Hover在此代码中不起作用。如果我删除Z-index，则悬停正常。

如何将悬停应用于此代码？

Answer 1

立即检查

＆＃13;

.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;
    }

＆＃13;

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

＆＃13;

Answer 2

纠正错误，代码可以正常运行：

<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>

如何将悬停效果应用于Z-index应用div？

2 个答案: