javascript - 悬停时标准按钮突出显示在边框样式更改时消失

Question

这是一个 fiddle

https://jsfiddle.net/an5fg5t2/

.differentbutton {
  margin: 1px;
  border-radius: 4px;
  border: 1px solid DarkGrey;
  height: auto;
  padding-top: 2px;
  padding-bottom: 2px;
}

<button>
  standard
</button>

<button class="differentbutton">
  Different
</button>

我所做的只是添加几个样式，这样 IE 按钮看起来就和 FF chrome 和 safari 一样了。但是，该更改导致悬停时突出显示消失。删除所有样式并一一添加它们意味着边框声明会导致悬停时突出显示不起作用。

我的搜索为其他平台带来了复杂的问题。是否有任何文档支持此行为？如何通过修改保持此行为？

Answer 1

要使其在悬停时突出显示，您需要将以下 CSS 代码添加到您的代码中:

.differentbutton:hover {
  border: 1px solid Grey;
}

如果您将它添加到类 .differentbutton 下，那么当您将鼠标悬停在按钮上时，它会为您“突出显示”该按钮，并根据您的需要更改颜色。