css - 单击/聚焦按钮后按钮悬停效果不显示

Question

我正在使用 Vaadin 框架开发 Web 应用程序。

我有一个样式为 BaseTheme.BUTTON_LINK 的按钮，并显示一个图标。该按钮被分配了一个具有悬停状态的 CSS 类，当按钮悬停时，图标将被替换。很简单。

但是，我发现单击按钮后，悬停将停止工作，直到您单击其他地方。按钮似乎在点击后获得焦点，然后悬停效果不起作用。

有谁知道使用 Vaadin 或 CSS 解决这个问题的方法吗？

编辑: 添加了 HTML 和 CSS

HTML:

<div style="height: 26px; width: 292px; overflow: hidden; float: left; padding-left: 6px; padding-top: 0px;">
  <div style="float: left; margin-left: 0px;">
    <div class="v-button v-button-link link v-button-m2m-refreshbutton m2m-refreshbutton" tabindex="0" role="button">
      <span class="v-button-wrap">
        <img class="v-icon" alt="" src="/M2M/VAADIN/themes/m2m/../m2m/img/refresh_.png">
        <span class="v-button-caption"></span>
      </span>
    </div>
  </div>
</div>

CSS:

.m2m-refreshbutton:hover {
    background: url("../m2m/img/refresh_hover.png") no-repeat center;
}

Answer 1

我在使用Vaadin创建Liferay portlet时遇到了同样的问题。我能够通过更改 CSS Vaadin 使用来修复它(通过使用 CSS Inject Add-on ，但也可以只提供自定义 Vaadin 主题)。对我有用的 CSS 片段是:

.v-button:active .v-button-wrap, .v-button.v-pressed .v-button-wrap, .v-button:focus .v-button-wrap {
background: #d4d4d4 url(/html/themes/classic/images/portlet/header_bg.png) repeat-x 0 0 !important}