Question

所以我希望有人能够对此有所了解。我有一个我在HTML和CSS中做的模型，允许菜单处理。当您将鼠标悬停在菜单项（由单个图像表示）上时，它会使用稍微透明的div和一些描述该选项的文本覆盖图像（例如，问号的图像，当悬停在其上时，会出现叠加层说＆＃34;信息＆＃34;或其他相似的东西）。这一切都很完美。

我现在将这个完全相同的HTML和CSS导入到phppress模板中，以便在Wordpress中使用。 CSS根本没有改变，HTML输出看起来一样（显然，一些HTML是由Wordpress动态生成的，但浏览器中的输出是相同的）。但是，现在当您将鼠标悬停在图像上时，div会直接显示在图像的右侧，而不是显示在图像的顶部。这是HTML和相关的CSS：

HTML

    <div id="menu">
        <a href="#" class="tab">
            <img src="images/diary.png" />
            <div class="tab-content">View the Diary</div>
        </a>
        <a href="#" class="tab">
            <img src="images/family.png" />
            <div class="tab-content">Woodman Family</div>
        </a>
        <a href="#" class="tab">
            <img src="images/history.png" />
            <div class="tab-content">Historical Context</div>
        </a>
        <a href="#" class="tab">
            <img src="images/about.png" />
            <div class="tab-content">About the Project</div>
        </a>
    </div>

CSS

#menu {
    width: 41%;  
    position: relative;
    float: left;
}

#menu .tab {
    display: inline-block;
    height: 90px;
    width: 23%;
    border-left: 3px solid #ffffff;
    padding-bottom: 12px;
}

#menu .tab img {
    width: 100%;
    height: 100px;
    transition: all .2s ease-in-out;
}

.tab-content {
    top: 0;
    margin: 0 auto;
    max-width: 24%;
    height: 70px;
    padding-top: 30px;
    text-align: center; 
    vertical-align: middle;
    position: absolute;
    color: #FFFFFF;
    background-color: rgba(86, 81, 65, .8);
    display: none;
    transition: all 1.2s;
    font-size: 14pt;
}

#menu .tab:hover > .tab-content {
    display: inline-block;
}

我的理论是，Wordpress中必定存在干扰，但我无法通过Chrome中的元素检查器找到任何内容。任何想法都会有很大帮助。我完全难过了。

奇怪的Wordpress / HTML / CSS行为

0 个答案: