HTML href 链接无效
HTML href links not working
我分配给每个里的 link 似乎甚至没有被识别为 link。除非我手动输入奇数代码,否则光标甚至不会变成一只手。 link 都是背景图片,所以我不知道是什么问题。请帮忙
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);
}
您在
之间没有添加任何内容
<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>
<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>
最好 link 你的 <li>
我分配给每个里的 link 似乎甚至没有被识别为 link。除非我手动输入奇数代码,否则光标甚至不会变成一只手。 link 都是背景图片,所以我不知道是什么问题。请帮忙
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);
}
您在
之间没有添加任何内容<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>
<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>
最好 link 你的 <li>