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/