Question

我无法使用悬停的CSS效果来处理我的div。

这是HTML：

<!doctype html><!--HTML5-->
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="chaosMain.css"/> 
</head>
<body>
    <div id="featuredContent1"></div>   
</body> 
</html>

以下是CSS：

    html{
        margin:0px;
        padding:0px;
        height:100%;
        width:100%
    }
    body{
        margin:0px;
        padding:0px; 
        height:100%;     
        width:100%;
        background-color:#F0F0F0;
        color:#F0F0F0;
    }
    div{
        position:fixed; 
    }

    #featuredContent1{
        margin-left:8.5%;
        margin-top:11.7%;
        width:23%;
        height:40%;
        background-color:#F26E24;
        z-index:-1;       
        border-radius:2px;
    }
    #featuredContent1:hover {
        width:25%;
        height:42%;
    }

我无法找到它的错误，但悬停没有任何效果。

Answer 1

从＃featuredContent1 style

中删除此行

z-index:-1;

码

 html{
        margin:0px;
        padding:0px;
        height:100%;
        width:100%
    }
    body{
        margin:0px;
        padding:0px; 
        height:100%;     
        width:100%;
        background-color:#F0F0F0;
        color:#F0F0F0;
    }
    div{
        position:fixed; 
    }

    #featuredContent1{
        margin-left:8.5%;
        margin-top:11.7%;
        width:23%;
        height:40%;
        background-color:#F26E24;
            
        border-radius:2px;
    }
    #featuredContent1:hover {
        width:25%;
        height:42%;
    background:red;
    }

<body>
    <div id="featuredContent1"></div>   
</body>

Answer 2

如答案B所示，这是由负z-index引起的。 div在技术上隐藏在身体后面，因此鼠标永远不会真正悬停在div上。

从“侧面”看，它看起来像这样：

------------------ (top)
------------------ body
------------------ element

所以，你的鼠标总是悬停在身体上，但不会悬停在元素上。

CSS悬停对我的div不起作用

2 个答案: