Lord Eww Lel Lord Eww Lel - 2 months ago 7
HTML Question

HTML href links not working

The links that I have assigned to each li does not seem to be even recognized as a link. The cursor does not even change to a hand unless I manually put the code in which is odd. The links are all background images so I can't figure out what the problem is. Please help.

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
<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>

its better to link your <li>

example: https://jsfiddle.net/TiG3R/u4w2v9q5/

Comments