CSS3中的按鈕不可點擊

Question

我想用Font Awesome，CSS3和HTML列表製作一些花哨的社交按鈕。它應該看起來像這樣。但現在無法點擊錨（a-tag）。

我該如何做到這一點？

ul { 
 
    list-style: outside none none; 
 
} 
 
ul li { 
 
    display: block; 
 
    float: left; 
 
    background-color: #099; 
 
    margin-right: 10px; 
 
    padding: 10px 0px; 
 
    text-align: center; 
 
    width: 40px; 
 
    opacity: 0.2; 
 
    transition: all 0.2s ease-in-out 0s; 
 
} 
 
li::before { 
 
    color: #FFF; 
 
    font-size: 35px; 
 
} 
 
ul li a { 
 
    color: transparent; 
 
    font: 0px/0 a; 
 
    white-space: nowrap; 
 
} 
 
ul li:hover { 
 
    opacity: 1; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<ul id="menu-social" class="menu"> 
 
    <li id="menu-item-googleplus" class="fa fa-google-plus menu-item menu-item-googleplus"> 
 
    <a href="#">Google+</a> 
 
    </li> 
 
    <li id="menu-item-facebook" class="fa fa-facebook menu-item menu-item-facebook"> 
 
    <a href="#">Facebook</a> 
 
    </li> 
 
</ul>

Answer 1

相對位置添加到所述li元素，然後拉伸錨。

ul li { 
    display: block; 
    float: left; 
    background-color: #099; 
    margin-right: 10px; 
    padding: 10px 0px; 
    text-align: center; 
    width: 40px; 
    opacity: 0.2; 
    transition: all 0.2s ease-in-out 0s; 

    /* Add position */ 
    position:relative; 
    } 

ul li a { 
    color: transparent; 
    font: 0px/0 a; 
    white-space: nowrap; 

    /* Stretch a element */ 
    position: absolute; 
    left:0; 
    top:0; 
    width:100%; 
    height: 100%; 
}