Question

我有以下代码：

<button onmousemove="this.style.border='2px #555555 solid';" 
   onmouseout="this.style.border='';">Test</button>

在mousemove上，它会正确更改指定的边框。在mouseout我的意图是将边框改回原来的边框。这适用于基于Gecko的浏览器，但不适用于IE。 IE删除所有边框，按钮变为2D。

如何取回按钮的原始3D外观？

注意：为了进行调试，我尝试alert(this.style.border)获取原始边框的值。它显示为空白。所以原始边界值似乎是空白的。但设置为空白并不会带来原始回顾。：（

Answer 1

尝试设置和清除元素的类并将边框值分配给类。如下所示：

.buttonHover
{
  border: 2px #555555 solid
}

<button onmousemove="this.className='buttonHover';" onmouseout="this.className='';">Test</button>

请注意，这个简单的JS代码会破坏分配给元素的现有类（如果有的话）。如果您要使用其他课程，请添加一条注释，声明情况，我会相应地更改代码。

Answer 2

据我所知，一旦设置了元素的边框，就无法恢复原始的操作系统外观，尽管奇怪的是即使清空border也无法完成工作。呃，好吧。操作系统风格不仅仅是经典的边框，还包括黑色轮廓（取决于操作系统的视觉设置，甚至更多）。

看作IE＆lt; 8不理解outline，我认为最好的解决方法是在按钮周围放置一个元素，并在悬停时突出显示。

Answer 3

建议使用CSS而不是javascript。您可以执行以下操作。仅定义按钮的悬停属性。

HTML：

<button value="Hello">Hello</button>

CSS：

button:hover
{
    border:1px solid #333;
}

Answer 4

我认为您正在寻找的内容可以在bowers用户代理CSS中找到。这是一个表格，可以让您了解不同浏览器http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm的最新情况。