问题描述:

I can't get the hover CSS effect to work on my divs.

Here is the 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>

Here is the CSS for it:

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

}

I can't find what is wrong with it, but the hover has no effect whatsoever.

网友答案:

remove this line from #featuredContent1 style

z-index:-1;     

code

 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> 
网友答案:

As shown in A B's answer, this is caused by the negative z-index. The div is technically hidden behind the body, so the mouse is never really hovering on the div.

Viewed from the "side" it would look like this:

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

So, your mouse is always hovering the body, but never hovering the element.

相关阅读:
Top