ホバー擬似クラスは画像のように、私はすべての入力およびラベル要素のためのホバー擬似クラスを書いた

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 
}