Hover псевдо-класс влияет на другие элементы

Question

Я написал парения псевдо-класс для всех входных и меток элементов, как показано на рисунке, но когда, когда я наведите мышь на одной этикетке другой отступа непосредственно справа

Preview

код показан:

<Style> 
    label { 
width: 180px; 
float: left; 
text-align: right; 
margin-right: 0.1em; 
display:inline-block; 
} 
label[type:checkbox]+[type:radio]{ 
    width: auto; 
input:hover { font-size:25px } 
label:hover { font-size:25px } 
</style> 

Answer 1

Прежде всего, вы должны понять, что разметка действует. Как уже упоминалось в комментариях, вы забыли фигурные скобки { для вашего дескриптора label[type...].

Чтобы избежать смещения других элементов при наведении, вы должны четко указать, что высота наведенной метки не станет больше высоты входного элемента рядом с ним. Поэтому line-height метки и height входов должны быть по меньшей мере равны 25px.

Поскольку вы не предоставили Minimal, Complete, and Verifiable example точный код трудно угадать, но следующее должно работать:

input { 
    height: 25px; /* <- */ 
} 
label { 
    width: 180px; 
    float: left; 
    text-align: right; 
    margin-right: 0.1em; 
    display: inline-block; 
    line-height: 25px; /* <- */ 
} 
label[type:checkbox]+[type:radio] { 
    width: auto; 
} 
input:hover { 
    font-size: 25px 
} 
label:hover { 
    font-size: 25px 
}