Css 答：悬停z索引不起作用……非常奇怪_Css

Css 答：悬停z索引不起作用……非常奇怪

css

Css 答：悬停z索引不起作用……非常奇怪,css,Css,我将同心圆编码为我的菜单栏，并尝试使用：悬停来影响每个圆的z索引。我给每个圆圈一个显示：block；属性，使每个圆本身就是一个链接（而不仅仅是其中的文本）。不幸的是，a:hover z-index命令根本不起作用。我已经阅读了stackoverflow上与此相关的其他线程，但这些解决方案似乎都不是我的问题。有人知道发生了什么事吗以下是CSS： a:hover{ z-index:90000; } #container { position: relative; width:

我将同心圆编码为我的菜单栏，并尝试使用：悬停来影响每个圆的z索引。我给每个圆圈一个显示：block；属性，使每个圆本身就是一个链接（而不仅仅是其中的文本）。不幸的是，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>

要悬停以放置

z-index:90000

的元素需要是相对的或绝对的。我不知道你在尝试什么，但在我看来，当一个外圆到达顶端时，它会阻止较小的内圆悬浮。无论哪种方式，正如前面的评论所说，您都需要将锚定位置设置为相对或绝对，或者将z索引添加到锚定内的div中。另外，由于样式表层叠，您需要在悬停时显示一个重要的图标。我还强烈建议您阅读以下内容：感谢您关于Z-index的文章。这很有启发性。但是，我将每个圆定位为position:absolute。我试图让每个圆都覆盖比鼠标悬停的圆小的圆。这里是我的非功能页面，看到了圆圈的构造：啊，我明白了！谢谢你的帮助！！要悬停以放置

z-index:90000