마우스 오버시 glyphicons 오버레이

Question

안녕하세요. 내 웹 사이트에 navbar가 있습니다. 그것의 디스플레이 인라인. 현재 navbar는 glyphicons와 그 옆에있는 텍스트의 "descriptionstion"을 사용합니다. (exaple "back"또는 "settings"을 위해) 나는 glyphicons 만 갖고 싶습니다. 그리고 마우스가 하나 이상있을 때 약간 색칠 된 오버레이 (글리프콘의 크기보다 약간 크다)와 본문. 어떻게하면됩니까? 나는 이런 식으로 뭔가있어 이미 온라인으로 여러 자습서를 시도하지만 ...을 glyphicons의 인라인 주문

#admin_menu .glyphicon         { margin: 0px 10px 0px 0px; font-size: 25px;} 
 
#admin_menu            { text-align: left; list-style-type: none; margin: 30px 0px 30px 0px; padding: 0px; } 
 
#admin_menu li           { display: inline; margin: 0px 0px 0px 0px; padding: 0px; } 
 
#admin_menu li a          { background-repeat: no-repeat; padding: 0px 15px 0px 0px; }

<ul id="admin_menu"> 
 
     <li><a href="#"><span class="glyphicon glyphicon-circle-arrow-left"></span> <span> text </span> </a></li> 
 
     <li><a href="#"><span class="glyphicon glyphicon-info-sign"></span> <span> text </span></a></li> 
 
     <li><a href="#"><span class="glyphicon glyphicon-edit"></span> <span> text </span></a></li> 
 
     <li><a href="#"><span class="glyphicon glyphicon-envelope"></span> <span> text </span></a></li> 
 
     <li><a href="#"><span class="glyphicon glyphicon-plane"></span> <span> text </span></a></li> 
 
     <li><a href="#"><span class="glyphicon glyphicon-stats"></span> <span> text </span></a></li> 
 
    </ul>

Answer 1

작동하지 않았다 https://jsfiddle.net/d04pLr6q/

을이되지 않을 수 있습니다 당신이 달성하기를 원하는 것, 확실하지는 않음).

#admin_menu .glyphicon{ 
    position: absolute; 
    font-size: 24px; 
    left: 50%; 
    margin-left: -12px; 
    top: 8px; 
    } 
    #admin_menu { text-align: left; list-style-type: none; margin: 30px 0px 30px 0px; padding: 0px; } 
    #admin_menu li{ 
    display: inline-block; 
    margin: 0px 10px 0px 0px; 
    padding: 0px; 
    } 
    #admin_menu li a { 
    display:block; 
    position: relative; 
    height:40px; 
    width: 60px; 
    padding: 0 10px; 
    font-size:16px; 
    padding-top:12px; 
    text-decoration:none; 
    } 
    #admin_menu .description{ 
     color:transparent; 
     position: absolute; 
     width: 100%; 
     height:100%; 
     top: 0; 
     left:0; 
     text-align: center; 
     line-height: 40px; 
     display: block; 
     transition: all 0.3s; 
    } 
    #admin_menu li a:hover .description{ 
     color: white; 
     background-color: rgba(51, 122, 183, 0.75); 
    } 

Answer 2

나는 이것이 당신이 따고 :

* { 
 
    box-sizing: border-box; 
 
} 
 
#admin_menu .glyphicon { 
 
    font-size: 25px; 
 
    padding: 0 15px 
 
} 
 
#admin_menu { 
 
    text-align: center; 
 
    list-style-type: none; 
 
    margin: 30px; 
 
    padding: 0px; 
 
} 
 
#admin_menu li { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
#admin_menu li a { 
 
    display: block; 
 
    text-align: center; 
 
} 
 
#admin_menu li a span:nth-child(2) { 
 
    font-weight: bold; 
 
    position: absolute; 
 
    color: red; 
 
    width: 100%; 
 
    left: 0; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    opacity: 0; 
 
    transition: opacity .35s ease; 
 
} 
 
#admin_menu li a:hover .glyphicon { 
 
    opacity: 0.2; 
 
    transition: opacity .35s ease; 
 
} 
 
#admin_menu li a:hover span:nth-child(2) { 
 
    opacity: 1 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<ul id="admin_menu"> 
 
    <li><a href="#"><span class="glyphicon glyphicon-circle-arrow-left"></span> <span> text </span> </a> 
 
    </li> 
 
    <li><a href="#"><span class="glyphicon glyphicon-info-sign"></span> <span> text </span></a> 
 
    </li> 
 
    <li><a href="#"><span class="glyphicon glyphicon-edit"></span> <span> text </span></a> 
 
    </li> 
 
    <li><a href="#"><span class="glyphicon glyphicon-envelope"></span> <span> text </span></a> 
 
    </li> 
 
    <li><a href="#"><span class="glyphicon glyphicon-plane"></span> <span> text </span></a> 
 
    </li> 
 
    <li><a href="#"><span class="glyphicon glyphicon-stats"></span> <span> text </span></a> 
 
    </li> 
 
</ul>