Question

我有一个div，其中包含网站左上角的联系信息。我希望背景的顶部隐藏在蓝色标题后面，但是当我将鼠标悬停在它上面时，我希望电子邮件链接加下划线。通过使用z-index，我可以获得下划线的电子邮件链接，但背景的顶部不会落在标题后面。我也可以在标题后面找到背景信息，但是当我悬停时，电子邮件链接并没有加下划线。我无法让两者同时工作。我的网站链接是http://www.michaelgray.com/hometest.html。有人可以帮我解决这个问题吗？感谢。

我的联系信息代码是;

.contactinformation {
    display: block;
    position: absolute;
    background-color: lightblue;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border: 1px solid gray;
    z-index: -100;
    font-weight: normal;
    font-size: 135%;
    color: darkblue;
    padding: 10px;
    margin-left: 75px;
    box-shadow: 0px 0px 10px 0px black;
}

我的标题代码是;

.header {
    background-color: #00aeef;
    z-index: 2;
    box-shadow: 0px 0px 10px 0px black;

}

Answer 1

现在您将.contactinformation z-index设置为-100，这会导致它落后于主要内容。您需要做的是将其设置为高于正文内容但低于标题的内容。

对于.header添加position:relative;（z-index生效所必需的）和.contactinformation将z-index更改为1 。您也可以完全从z-index删除.contactinformation。

电子邮件：悬停链接无效

1 个答案: