透明懸停背景

請訪問'jsfiddle'Code，其中可以看到輸出。當懸停顯示菜單文本時，文本字段的背景是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; 
}

Output Image

有人可以請指導解決方案？

來源

2014-11-21 Khaled Javeed

只需添加

z-index:200

到.btn，並沒有改變任何定位fiddle

來源

2014-11-21 21:54:27 Billy

只是加上位置：相對;和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; }

來源

2014-11-21 21:32:38

在 btn:hover .btn-name

添加position relative and z-index: 1

.btn：懸停.btn名{

/* 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

來源

2014-11-21 21:42:26

透明懸停背景

回答

相關問題