透明悬停背景答案

【问题标题】：transparent hover background透明悬停背景
【发布时间】：2014-11-21 21:19:00
【问题描述】：

请访问'jsfiddle'Code，可以看到输出。当 hover 显示菜单文本时，文本字段的背景是 transpernt + 和较低的 zindex。我没有为菜单设置任何透明度或 zindex。我已经尝试了所有可能的技术来解决它，但没有运气。

    .control-menu {
    float: left;
    width: 50px;
    background-color: #F0F0F0;
    height: 380px;
    border-right: 1px solid #e0e0e0;
    z-index: 100;
}
.control-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.btn {
    position: relative;
    display: block;
    text-decoration: none;
    background-color: #e0e0e0;
    padding: 15px 20px 10px 20px;
    text-align: center;
    margin: 0 0 1px 0;
    border-right: 1px groove #f00;
    text-shadow: #666666 1px 1px 1px;
}
.btn-name {
    display: none;
    border-top: 1px solid #f0f0f0;
    padding-top: 16px !important;
}
.btn:hover .btn-name {
    display:inline;
    background-color: #e0e0e0;
    width: 100px;
    padding: 17px 20px 12px 0;
    margin: 0 0 1px 0;
    border-right: 1px groove #f00;
}
.btn.active {
    background-color: #F0F0F0;
    border-bottom: 1px solid #f00;
}
.btn.active:hover .btn-name {
    background-color: #F0F0F0;
    border-bottom: 1px solid #f00;
}

有人可以指导解决方案吗？

【问题讨论】：

标签： html css hover

【解决方案1】：

添加

 z-index:200

到.btn，没有改变任何定位fiddle

【讨论】：

【解决方案2】：

只需添加 position: relative; 和 z-index: 1000;

.btn:hover .btn-name { display: inline; background-color: #e0e0e0 !important; width: 100px; padding: 17px 20px 12px 0; margin: 0 0 1px 0; border-right: 1px groove #f00; position: relative; z-index: 1000; }

【讨论】：

【解决方案3】：

在btn:hover .btn-name 中添加position relative and z-index: 1

.btn:悬停 .btn-name {

    /* add this */
    position: relative;
    z-index: 1;

    /* you code   */
    display: inline;
    background-color: #e0e0e0 !important;
    width: 100px;
    padding: 17px 20px 12px 0;
    margin: 0 0 1px 0;
    border-right: 1px groove #f00;

}

这里是修复：jsfiddle

【讨论】：