Question

我分配给每个li的链接似乎甚至没有被识别为链接。除非我手动将代码置于奇数中，否则光标甚至不会变为手形。链接都是背景图片，所以我无法弄清问题是什么。请帮忙。

The HTML
<div class="social_container">
<ul>

<li class="fb"><a href="https://www.facebook.com/" target="_blank"></a></li>
<li class="twitter"><a href="#3"></a></li>
<li class="insta"><a href="#4"></a></li>
<li class="yt"><a href="#5"></a></li>
<li class="google"><a href="#6"></a></li>

</ul>

</div>


The CSS

.social_container ul {
      position: relative;
      top: 10%;
      width: 100%;
          padding: 0;
      text-align: center;
      }

.social_container li {
      list-style: none;
      display: inline-block;
       margin: 0 30px 30px 0; 
       cursor: pointer; cursor: hand;
       text-align: center;

 }

.social_container li a {
          display: inline-block;
                               }


.social_container .fb {
            background: url("New Assets/FB.png") no-repeat;
            padding: 25px;
            background-size: contain;
              -webkit-transition: all .5s ease; 
    -moz-transition: all .5s ease; 
    -ms-transition: all .5s ease; 
    -o-transition: all .5s ease; 
    transition: all .5s ease;

             }

.social_container .fb:hover {

  -webkit-transform:scale(1.2); 
    -moz-transform:scale(1.2); 
    -ms-transform:scale(1.2); 
    -o-transform:scale(1.2); 
     transform:scale(1.2);
}



.social_container .twitter {
            background: url("New Assets/TWITTER.png") no-repeat;
             background-size: contain;
              padding: 25px;
              -webkit-transition: all .5s ease; 
    -moz-transition: all .5s ease; 
    -ms-transition: all .5s ease; 
    -o-transition: all .5s ease; 
    transition: all .5s ease;

             }

.social_container .twitter:hover {

  -webkit-transform:scale(1.2); 
    -moz-transform:scale(1.2); 
    -ms-transform:scale(1.2); 
    -o-transform:scale(1.2); 
     transform:scale(1.2);
}


.social_container .insta {
            background: url("New Assets/INSTA.png") no-repeat;
             background-size: contain;
              padding: 25px;
              -webkit-transition: all .5s ease; 
    -moz-transition: all .5s ease; 
    -ms-transition: all .5s ease; 
    -o-transition: all .5s ease; 
    transition: all .5s ease;

             }

.social_container .insta:hover {

  -webkit-transform:scale(1.2); 
    -moz-transform:scale(1.2); 
    -ms-transform:scale(1.2); 
    -o-transform:scale(1.2); 
     transform:scale(1.2);
}


.social_container .yt {
            background: url("New Assets/YT.png") no-repeat;
             background-size: contain;
              padding: 25px;
              -webkit-transition: all .5s ease; 
    -moz-transition: all .5s ease; 
    -ms-transition: all .5s ease; 
    -o-transition: all .5s ease; 
    transition: all .5s ease;

             }

.social_container .yt:hover {

  -webkit-transform:scale(1.2); 
    -moz-transform:scale(1.2); 
    -ms-transform:scale(1.2); 
    -o-transform:scale(1.2); 
     transform:scale(1.2);
}


.social_container .google{
            background: url("New Assets/GOOGLE.png") no-repeat;
             background-size: contain;
              padding: 25px;
              -webkit-transition: all .5s ease; 
    -moz-transition: all .5s ease; 
    -ms-transition: all .5s ease; 
    -o-transition: all .5s ease; 
    transition: all .5s ease;

             }

.social_container .google:hover {

  -webkit-transform:scale(1.2); 
    -moz-transform:scale(1.2); 
    -ms-transform:scale(1.2); 
    -o-transform:scale(1.2); 
     transform:scale(1.2);
}

Answer 1

你没有在

之间添加任何东西

<a> and </a>

<div class="social_container">
<ul>

<li class="fb"><a href="http://www.facebook.com/" target="_blank"></a></li>
<li class="twitter"><a href="#3">something needs to be here</a></li>
<li class="insta"><a href="#4">something needs to be here</a></li>
<li class="yt"><a href="#5">something needs to be here</a></li>
<li class="google"><a href="#6">something needs to be here</a></li>

</ul>

另外，出于好奇，为什么要添加div？为什么不：

<ul class="social_container">
  <li>
    <a>...</a>
  </li>
</ul>

Answer 2

<div class="social_container">
<ul>

<a href="https://www.facebook.com/" target="_blank"><li class="fb"> Face Book </li></a>
<a href="#3"><li class="twitter"> 3 </li></a>
<a href="#4"><li class="insta"> 4 </li></a>
<a href="#5"><li class="yt"> 5 </li></a>
<a href="#6"><li class="google"> Google </li></a>

</ul>

</div>

最好链接您的<li>

示例：https://jsfiddle.net/TiG3R/u4w2v9q5/

HTML href链接不起作用

2 个答案: