Jeeva Jeeva - 1 year ago 52
jQuery Question

How to keep a Html element Position intact and don't allow to change its position

Below are 2 images. when i hove over "Roles" i want to increase the padding and also don't want the "add roles" button to change its position. is there any way to stop that.

When i Don't Hover over Roles

enter image description here

When i hover over roles.

enter image description here

Below are my HTML and CSS Codes for Ref

<ul class="tab-group">
<li class="tab active"><a href="#roles">Roles</a></li>
<li class="tab "><a href="#user">User</a></li>
<ul class="tab-onebtn">
<li class="logouttab"> <a href="<?php echo base_url(); ?>Login/logout" style="float: left;"> Add Role </a> </li>


.tab-group {
list-style: none;
padding: 0;
margin: 0 0 40px 0;
.tab-group:after {
content: "";
display: table;
clear: both;
.tab-group li a {
display: block;
text-decoration: none;

background: rgba(160, 179, 176, 0.25);
color: #a0b3b0;
font-size: 20px;
float: left;
width: 14.25%;
text-align: center;
cursor: pointer;
-webkit-transition: .5s ease;
transition: .5s ease;
.tab-group li a:hover {
background: #179b77;
color: #ffffff;
padding: 8px;
.tab-group .active a {
background: #1ab188;
color: #ffffff;

.tab-content > div:last-child {
display: none;

Answer Source

If what you want is the Roles appearing bigger when hovered you can use something like :

.tab-group li a:hover {
   background: #179b77;
   color: #ffffff;

instead of adding padding