Question

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

我将Button设置为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}

Answer 2

一般来说，最好只用CSS中的背景图像来做这个。

您还应该使用<a></a>标记，因为较旧的Internet Explorers不会将链接状态应用于<a></a>以外的HTML元素。

基本上可以为链接的不同状态获取不同的图像，如下所示：

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);
}

Answer 3

使用 javascript 是可能的。

先拿到按钮

buttonElement = document.getElementById("yourID");

为按钮添加事件监听器并调用函数。

ButtonElement.addEventListener('click', nofocus);

创建函数

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

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

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

3 个答案: