在 IE 中将鼠标悬停在 html 按钮上时焦点类型 css

Question

在页面上，当我们跨元素切换时，它们会获得焦点，并且这些元素会通过某些浏览器特定 css 突出显示。

在聚焦时点赞按钮显示如下图所示。

Notice the white dotted line on button

我想在按钮为 hovered

时显示完全相似的内容

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

Answer 1

有CSSoutline property, but it won’t render inside the element. If we use a simple border for the dotted line, we nee to get some spacing between the dots and the visible border. Perhaps using 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;
}

Answer 2

这是您要找的吗？ http://jsfiddle.net/Screetop/tpx5tyxc/ 正如其他人所说，看一下大纲属性。 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;
}

在 IE 中将鼠标悬停在 html 按钮上时焦点类型 css

Focus type css while hovering on html button in IE

html

css

focus