将鼠标悬停在 IE 中的 html 按钮上时聚焦类型 css答案

【问题标题】：Focus type css while hovering on html button in IE将鼠标悬停在 IE 中的 html 按钮上时聚焦类型 css
【发布时间】：2015-07-14 08:05:22
【问题描述】：

在一个页面上，当我们跨元素使用标签时，它们会获得焦点，并且这些元素会通过一些特定于浏览器的 css 突出显示。

像按钮一样聚焦时它显示如下屏幕截图。

注意按钮上的白色虚线

我想在按钮为hovered时显示完全相似

button:hover {
   /*What should go here?*/
}

【问题讨论】：

习惯了 button:focus{outline:none;}, outline:0;
@RohitAzad 我想显示轮廓，并且悬停在 css 上

标签： html css focus

【解决方案1】：

这就是你要找的吗？ http://jsfiddle.net/Screetop/tpx5tyxc/ 正如其他人所提到的，请查看 outline 属性。 box-shadow 还会模拟按钮周围的边框。

<button>Submit</button>

button {
    display: block;
    background: grey;
    padding: 5px;
    border: none;
    box-shadow: 0 0 0 3px grey;
}
button:hover {
   /*What should go here?*/
    outline: 1px dotted white;
}
button:focus {
    outline: 1px dotted white;
}

【讨论】：

是的，我需要与您在 js fiddle 中显示的完全相同。这可以在 IE8 中使用吗？
您可能希望交换:hover 和:focus 的顺序。我认为可访问性最好的顺序是:link:visited:focus:hover:active。这为您提供了覆盖样式的最佳方式
我相信轮廓会起作用，但盒子阴影不会。我相信有一个解决方法：useragentman.com/blog/2011/08/24/…。 @Adam 感谢您的提示 :) 但是为什么这个特殊的顺序？ @Ahs 干得好 :)
它的这个顺序使得访问的链接总是会覆盖标准链接。但是悬停的、聚焦的或活动的链接将覆盖已访问的链接。与活动相同，然后将覆盖悬停链接（活动有点像按钮按下事件）。此链接有更多信息meyerweb.com/eric/css/link-specificity.html
@AdamHughes 谢谢！会看看。

【解决方案2】：

有 CSS outline 属性，但它不会在元素内呈现。如果我们对虚线使用简单的border，我们需要在点和可见边框之间留出一些间距。也许使用box-shadow？试试这个：

button{
    width:140px;
    height:36px;
    color:#FFF;
    background-color:#555;
    border:1px dotted #555;
    border-radius:2px;
    box-shadow: 0 0 0 4px #555;
}
button:hover{
    border-color:#FFF;
}

【讨论】：

我想在按钮悬停时保留轮廓，而不是删除。我不想删除它。