background in event focus in tag a html

Question

background in event focus in tag a html

Navigation

#1 by (2 votes)

0

I'm doing a kind of icon panel where the user can select an icon, what I want to do is that when the user selects the icon it lights up (this is done only when I mouse over the icon but it does not remain illuminated when I select it and it is what I need) and the background of the icon changes color, but it turns out that the background of the icon changes color but instead of a circle I have managed to make a rectangle with rounded corners, in the image you can see that the yellow icon is when I have already clicked on that icon and the blue icon is when I pass over the icon the mouse, as you will have noticed the yellow icon does not form the whole circle

.list-unstyled {
padding-left: 0;
list-style: none;

}
.list-inline li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
margin-bottom: 10px;
}
 
.social-icons .fa {
font-size: 1em;
}

.social-icons .fa {
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
color: #FFF;
color: rgba(255, 255, 255, 0.8);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.social-icons.icon-circle .fa{
border-radius: 50%;
}
.social-icons.icon-rounded .fa{
border-radius:5px;
}
.social-icons.icon-flat .fa{
border-radius: 0;
}
.social-icons .fa:hover, .social-icons .fa:active {
    background-color:blue;
color: #FFF;
-webkit-box-shadow: 1px 1px 3px #333;
-moz-box-shadow: 1px 1px 3px #333;
box-shadow: 1px 1px 3px #333;
}
.social-icons.icon-zoom .fa:hover, .social-icons.icon-zoom .fa:active {

  -webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
.social-icons.icon-rotate .fa:hover, .social-icons.icon-rotate .fa:active {

-webkit-transform: scale(1.1) rotate(360deg);
-moz-transform: scale(1.1) rotate(360deg);
-ms-transform: scale(1.1) rotate(360deg);
-o-transform: scale(1.1) rotate(360deg);
transform: scale(1.1) rotate(360deg);
}

.enlace > a:focus {
 cursor:pointer;
  background-color:gold;
  border-radius:30%;
}

 <ul id="navegador" class="social-icons icon-circle list-unstyled list-inline">
                                    <li class="enlace"><a href="#"><i class="fa fa-android"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-apple"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-bitcoin"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-css3"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-dropbox"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-facebook"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-facebook-square"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-google-plus"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-html5"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-instagram"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-linkedin"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-linkedin-square"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-linux"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-pinterest"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-pinterest-square"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-skype"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-trello"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-tumblr"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-tumblr-square"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-twitter"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-twitter-square"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-vimeo-square"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-windows"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-youtube"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-youtube-play"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-youtube-square"></i></a></li>
                                </ul>

html5 html css3 css

asked by Ivxn 21.11.2017 в 00:08

source

1 answer

Error trying to use Collections.sort on an ArrayList Send array via Ajax

score 2 · Accepted Answer

Well Ivxn, the problem comes in this class

.enlace > a:focus {
 cursor:pointer;
  background-color:gold;
  border-radius:30%;
}

You should apply it in .fa not in the link (a), for example:

.enlace > a:focus .fa {
  cursor:pointer;
  background-color:blue;
  border-radius:50%;
}

You also had bad border-radius, it has to be 50%

Then you also have this class:

.social-icons .fa {
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
color: #FFF;
color: rgba(255, 255, 255, 0.8);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

Repeat the color property twice

color: #FFF;
color: rgba(255, 255, 255, 0.8);

And the white color is set with a transparency. Remove the second line line.

I leave an example, I hope it has been useful, greetings.

body{
  background:gray;
}

.list-unstyled {
padding-left: 0;
list-style: none;

}
.list-inline li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
margin-bottom: 10px;
}
 
/*Cambio el tamaño de letra o fuente*/
.social-icons .fa {
font-size: 1em;
}
/*Change icons circle size and color here*/
.social-icons .fa {
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
color: #FFF;

-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.social-icons.icon-circle .fa{
border-radius: 50%;
}
.social-icons.icon-rounded .fa{
border-radius:5px;
}
.social-icons.icon-flat .fa{
border-radius: 0;
}
.social-icons .fa:hover, 
.social-icons .fa:active {
    background-color:blue;
color: #FFF;
-webkit-box-shadow: 1px 1px 3px #333;
-moz-box-shadow: 1px 1px 3px #333;
box-shadow: 1px 1px 3px #333;
}
.social-icons.icon-zoom .fa:hover, 
.social-icons.icon-zoom .fa:active {

  -webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
.social-icons.icon-rotate .fa:hover, 
.social-icons.icon-rotate .fa:active {

-webkit-transform: scale(1.1) rotate(360deg);
-moz-transform: scale(1.1) rotate(360deg);
-ms-transform: scale(1.1) rotate(360deg);
-o-transform: scale(1.1) rotate(360deg);
transform: scale(1.1) rotate(360deg);
}

.enlace > a:focus .fa {
 cursor:pointer;
  background-color:red;
  border-radius:50%;
}

<script src="https://use.fontawesome.com/8df9df0ff7.js"></script>

<ul id="navegador" class="social-icons icon-circle list-unstyled list-inline">
  <li class="enlace"><a href="#"><i class="fa fa-android"></i></a></li>
  <li class="enlace"><a href="#"><i class="fa fa-apple"></i></a></li>
  <li class="enlace"><a href="#"><i class="fa fa-bitcoin"></i></a></li>
  <li class="enlace"><a href="#"><i class="fa fa-css3"></i></a></li>
  <li class="enlace"><a href="#"><i class="fa fa-dropbox"></i></a></li>
  <li class="enlace"><a href="#"><i class="fa fa-facebook"></i></a></li>
  <li class="enlace"><a href="#"><i class="fa fa-facebook-square"></i></a></li>
  <li class="enlace"><a href="#"><i class="fa fa-google-plus"></i></a></li>
  <li class="enlace"><a href="#"><i class="fa fa-html5"></i></a></li>
  <li class="enlace"><a href="#"><i class="fa fa-instagram"></i></a></li>
  <li class="enlace"><a href="#"><i class="fa fa-linkedin"></i></a></li>
  <li class="enlace"><a href="#"><i class="fa fa-linkedin-square"></i></a></li>
  <li class="enlace"><a href="#"><i class="fa fa-linux"></i></a></li>
  <li class="enlace"><a href="#"><i class="fa fa-pinterest"></i></a></li>
  <li class="enlace"><a href="#"><i class="fa fa-pinterest-square"></i></a></li>
  <li class="enlace"><a href="#"><i class="fa fa-skype"></i></a></li>
  <li class="enlace"><a href="#"><i class="fa fa-trello"></i></a></li>
  <li class="enlace"><a href="#"><i class="fa fa-tumblr"></i></a></li>
  <li class="enlace"><a href="#"><i class="fa fa-tumblr-square"></i></a></li>
  <li class="enlace"><a href="#"><i class="fa fa-twitter"></i></a></li>
  <li class="enlace"><a href="#"><i class="fa fa-twitter-square"></i></a></li>
  <li class="enlace"><a href="#"><i class="fa fa-vimeo-square"></i></a></li>
  <li class="enlace"><a href="#"><i class="fa fa-windows"></i></a></li>
  <li class="enlace"><a href="#"><i class="fa fa-youtube"></i></a></li>
  <li class="enlace"><a href="#"><i class="fa fa-youtube-play"></i></a></li>
  <li class="enlace"><a href="#"><i class="fa fa-youtube-square"></i></a></li>
</ul>