Give edge to li with css [duplicated]

Question

Give edge to li with css [duplicated]

Navigation

#1 by (1 votes)

0

I have this style that I got from the page

.circulo {
         width: 100px;
         height: 100px;
         -moz-border-radius: 50%;
         -webkit-border-radius: 50%;
         border-radius: 50%;
         background: #5cb85c;
    }

without it ceasing to be a circle, I want to give it a border when I click it and when it is hover it enlarges a bit

and with this I increase it in the hover

.circle ul li a:hover {
    background-color: transparent;
    -webkit-transform:scale(1.3);transform:scale(1.3);
    cursor:pointer; 
    cursor: hand;
}

As you can see in the center at the bottom is the "circle" and has white center and pink border.

css3 css hover

asked by Andrés Vélez 17.04.2018 в 17:55

source

1 answer

How to load a background image in a Java Canvas Problem Generating APK on Android with Ionic 3

score 1 · Accepted Answer

To be enlarged with the hover you can use what you have done to modify the properties of width and height within the css you have made.

On the other hand, to make the border when you click you can do it in several ways but in all you use javaScript.

An example is making a css class just for that edge:

.borde {
border: solid 1px #000;
}

And adding it to the circle when clicking with a js:

document.querySelector(".circle").onclick = function() {
    document.querySelector(".circle").addClass("borde");
}

Another solution would be to directly add the edge property to it by js:

document.querySelector(".circle").style.border= "solid 1px #000";