Question

我将同心圆编码为我的菜单栏，我正在尝试使用：hover来实现每个圆圈的z-index。我给每个圆圈一个显示：块;属性，以便每个圆圈本身是一个链接（不仅仅是文本内）。不幸的是，a：hover z-index命令根本不起作用。我已经阅读了与此相关的stackoverflow上的其他线程，但这些解决方案似乎都不是我的问题。有谁知道发生了什么？

这是CSS：

a:hover{ 
  z-index:90000;
}

#container {
   position: relative;
   width: 500px;
   height:500px;

}

#circle {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000000;
    border-radius: 50%;
    box-sizing: border-box;
    text-align: center;
    vertical-align: middle;
    display: block;
    z-index: 5;
 }

#circle1{
    position: absolute;
    width: 85%;
    height: 85%;
    background-color: #e5e5e5;
    border-radius: 50%;
    box-sizing: border-box;
    text-align: center;
    vertical-align: middle;
    display: block;
    padding-top: 100px;
    margin-top: 7.5%;
    margin-left: 7.5%;
    z-index: 6;
}


#circle2{
    margin-top: 15%;
    margin-left: 15%;
    position: absolute;
    width: 70%;
    height: 70%;
    background-color: #0C9;
    border-radius: 50%;
    box-sizing: border-box;
    color: #00F;
    display: block;
    z-index: 7;
}


#circle3{
    margin-top: 25%;
    margin-left: 25%;
    position: absolute;
    width: 50%;
    height: 50%;
    background-color: #C33;
    border-radius: 50%;
    box-sizing: border-box;
    background-image: url(Sunset.jpg);
    text-align: center;
    vertical-align: middle;
    color: #FFF;
    display: block;
    padding-top: 100px;
    z-index: 8;
}

这是HTML：

<div id="container">
<div id="circle"></div>
<a style="display:block" a href="p1.html">
<div id="circle1">PHOTOGRAPHS</div>
</a>
<div id="circle2"></div>
<a style="display:block" a href="p1.html">
<div id="circle3">BED TIME</div>
</a>
</div>

a：悬停z-index不工作......很奇怪

0 个答案: