ImageButton 和 Input type="image" 边框仅在悬停时出现答案

【问题标题】：ImageButton and Input type="image" border only appearing on hoverImageButton 和 Input type="image" 边框仅在悬停时出现
【发布时间】：2013-02-21 15:56:55
【问题描述】：

当您将鼠标悬停在 input type='image' 上时，边框会出现，然后在离开图像时消失。但不仅仅是能见度，它的间距也丢失了。我希望我的图像保持在静态位置，但仍然受益于出现的边框。因此我只希望它改变颜色。是否可以在悬停之前使边框出现？这是我试图避免的图像抖动。

【问题讨论】：

标签： html css imagebutton

【解决方案1】：

在图像上设置边框宽度，但不设置颜色，然后在悬停时设置颜色。这将确保图像周围始终有一个固定宽度的边框，因此不会在悬停时移动图像位置。

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

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

现场演示： http://jsfiddle.net/rAPds/

【讨论】：

我尝试了很多排列。但是您确定了一个有效的方法。请注意，必须删除句点（。）
能否再次麻烦您，询问您是否知道如何消除图像按钮之间的空间。我设置 .input[type="image"] {border:solid 3px transparent;边距：0！重要； } ...但它没有解决它。
@DavidStewart 由于透明边框，空间在那里。如果您删除此边框，当再次将边框应用到悬停时，您将遇到图像跳跃的问题。一种解决方案是将每个输入嵌套在 div 容器中并使用 Chris Coyier 的解决方案 css-tricks.com/image-rollover-borders-that-do-not-change-layout
一开始我也是这么想的。但这绝对是一个额外的空间，当我查看“查看源代码”时没有考虑到这一点。我可以将鼠标指针放在两个图像按钮之间，并且都不突出显示
我已经弄清楚了第二个...这似乎是换行问题。我只需要让按钮在 html 中从一个到下一个而没有换行符。感谢您对悬停的帮助。页面看起来很甜蜜！