Question

我想在hoverisation上更改z-index的值，我已经编写了以下代码。我的HTML代码是：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="mystyle.css"/>
    </head>
    <body>
        <div>
            <a href="http://www.stackoverflow.com"> The first link </a>
        </div>
        <div>
            <a href="http://www.github.com"> the second link</a>
        </div>
</html>

我的CSS在这里：

div:first-child a
{
    position: absolute;
    font-size:20px;
    height: 100px;
    width: 100px;
    z-index:1;
    background-color:green;
}

div + div a
{
    font-size:20px;
    height: 100px;
    width: 100px;
    left:50% ;
    background-color: red;
}

div:first-child a:hover
{
    z-index:555555; 
    font-size:10px;
}

div + div a:hover
{
    z-index:555555;
    font-size:50px;
}

在悬停时，只有字体大小正在变化。我怎么能用CSS做到这一点？

Answer 1

添加

position:relative;

到你的其他div。

z-index仅适用于已明确指定位置的元素。

Answer 2

这对你有用

div:first-child a { position: relative; font-size:20px; height: 100px; width: 100px; z-index: (give value); background-color:green; }

如何在hoverization上更改z-index值？

2 个答案: