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%;
}

CSS3中的按钮无法点击

1 个答案: