I don't have much knowledge in CSS, so I would like to know how can I create a transparent border using CSS?
The purpose of this border is like, I need to show a border on hovering <li> but it displaces other elements on hover if i write code like this
li{ display:inline-block; padding:10px; } li:hover{ border:1px solid black; }
So I believe adding a transparent border on <li>, will remove this bad effect
Answered by:- vikas_jk
Try this code , as suggested by Jakub here
li{
display:inline-block;
padding:10px;
}
li:hover{
border:1px solid black;
padding: 9px;
}
Answered by:- neena
You can also add transparent background using CSS on <li> and then on hover change the color of <li>
li{
display:inline-block;
padding:10px;
border: 1px solid transparent;
}
li:hover{
border:1px solid black;
}In the above solution we are keeping border width same, so when user will hover on any li, it will change only color of <li>
Subscribe to our weekly Newsletter & Keep getting latest article/questions in your inbox weekly
Buy us a coffee
Become a Patron