html - ImageButton および Input type="image" 境界線はホバー時にのみ表示されます

Question

カーソルを合わせるinput type='image'と境界線が表示され、画像から離れると消えます。しかし、視認性だけでなく、その間隔も失われます。画像を静的な位置にとどめながら、境界線が表示されることでメリットが得られるようにしたい. したがって、色を変更するだけです。ホバリングする前に境界線を表示することは可能ですか? それは私が避けようとしているイメージです。

Answer 1

画像に境界線の幅を設定しますが、色は設定せず、ホバー時に色を設定します。これにより、画像の周囲に固定幅の境界線が常に存在することが保証されるため、ホバー時に画像の位置がずれることはありません。

input[type="image"]
{
   border:solid 3px transparent;
}

input[type="image"]:hover
{
   border-color:#ff0;
}

ライブデモ: http://jsfiddle.net/rAPds/