Question

我的目标是将鼠标悬停在next_wrapper上，然后会出现nav_text_title_next。现在，图片和标记nav_text_title_next都会出现，但遗憾的是，我无法看到标记nav_text_title_next中的任何文字。我对其他部分使用相同的代码，但它运行良好，但它不适用于此部分。你能帮我弄清楚出了什么问题吗？

HTML：

<div class="next_wrapper" id="next_wrapper_title" style="position:absolute; left:1050px; top:300px; z-index:5;">
            <a class="next_button" href="#blah" style="background:none;">
                <p class="navigation_text_next" id="nav_text_title_next">
                    HI!
                </p>
                <img class="next_button" src="img/next-icon.gif" onmouseover="this.src='img/next-icon-stop2.gif'" onmouseout="this.src='img/next-icon.gif'">
            </a>
</div>

这是CSS：

.next_wrapper {
    position: absolute; 
    top: 0px; 
    left: 95px;
}

#nav_text_title_next {
    display: none;
}

#next_wrapper_title:hover #nav_text_title_next {
    display: block;
}

.next_button {
    width:75px;
    background: none;
    position: absolute;
}

.navigation_text_next {
        background: #000;
        color: #FFF;
        font-family: AvenirLTStd-Medium;
        font-weight: normal;
        font-style: normal;
        font-size: 11px;
        position: absolute;
        width: 100px; 
        height: 55px;
        top: 30px;
        left: 67px;
        padding-top: 10px;
        padding-bottom: 10px; 
        padding-left: 45px; 
        padding-right: 5px;
        text-align: left;
        display: none;
    }

.next_button {
        width:75px;
        background: none;
        position: absolute;
    }

Answer 1

您的显示无删除，您将看到您的文字也删除你的图像

然后做类似的事情

in html

<p>bla</p>

在css中

p {
 opacity:0;
}

p:hover {
  opacity:1;
}

Answer 2

您已将其隐藏在视图中，这就是原因。

.navigation_text_next {
        background: #000;
        color: #FFF;
        font-family: AvenirLTStd-Medium;
        font-weight: normal;
        font-style: normal;
        font-size: 11px;
        position: absolute;
        width: 100px; 
        height: 55px;
        top: 30px;
        left: 67px;
        padding-top: 10px;
        padding-bottom: 10px; 
        padding-left: 45px; 
        padding-right: 5px;
        text-align: left;
        display: none; <-- remove this
    }

您可以删除display: none;，因为父母是亲戚而不是必需的。

文本未显示在p标记中

2 个答案: