1

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

我有一个样式为 BaseTheme.BUTTON_LINK 的 Button 并显示了一个图标。按钮被分配了一个具有悬停状态的 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;
}
4

3 回答 3

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}
于 2012-08-03T07:39:28.290 回答
0

一般来说，最好只使用 CSS 中的背景图像来执行此操作。

您还应该为此使用<a></a>标签，因为例如较旧的 Internet Explorer 不会将链接状态应用于除<a></a>.

基本上可以像这样为链接的不同状态获取不同的图像：

HTML：

<a class="someClass" href="location"></a>

CSS：

.someClass {
    background-image: url(path_from_css_file/link.png);
    background-repeat: no-repeat;
    background-position: top left;
}

.someClass:hover {
    background-image: url(path_from_css_file/link_hover.png);
}

.someClass:focus {
    background-image: url(path_from_css_file/link_focus.png);
}

.someClass:active {
    background-image: url(path_from_css_file/link_active.png);
}

.someClass:visited {
    background-image: url(path_from_css_file/link_visited.png);
}
于 2012-08-01T11:25:33.520 回答
0

使用javascript是可能的。

首先获取按钮

buttonElement = document.getElementById("yourID");

将事件侦听器添加到按钮并调用函数。

ButtonElement.addEventListener('click', nofocus);

创建函数

function nofocus () {
this.blur();
}

每当您单击按钮时。焦点状态将消失。

于 2021-01-10T18:55:30.417 回答