按钮悬停效果在按钮被点击/聚焦后不显示 [英] Button hover effect not showing after button is clicked/focused

问题描述

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

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

但是，我发现点击按钮后，悬停停止工作，直到您点击其他位置。

有人知道一种工作方式，使用Vaadin或CSS吗？ / p>

EDIT：添加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-refreshbuttontabindex =0role =button> 
< span class =v-button-wrap> 
< img class =v-iconalt =src =/ M2M / VAADIN / themes / m2m /../ m2m / img / refresh_.png> 
< span class =v-button-caption>< / span> 
< / span> 
< / div> 
< / div> 
< / div> 
  

CSS：

 code> .m2m-refreshbutton：hover {
 background：url（../ m2m / img / refresh_hover.png）no-repeat center; 
} 
  

解决方案

我使用Vaadin来创建Liferay portlet。我能够通过更改CSS Vaadin使用（通过使用 CSS注入插件）修复它，但也可以只提供一个自定义的Vaadin主题）。对我有用的CSS是：

  .v-button：active .v-button-wrap， button.v按下.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} 
  

I'm developing a web application using the Vaadin framework.

I have a Button styled as BaseTheme.BUTTON_LINK and have an icon showing. The button is assigned a CSS class which has a hover state, when the button is hovered the icon is replaced. Simple enough.

However, I find that once the button is clicked, the hover stops working until you click elsewhere. The button seem to be focused after clicking and then the hover effect doesn't work.

Does anyone know a way to work abound this, either using Vaadin or CSS?

EDIT: HTML and CSS added

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

解决方案

I encountered the same problem when I used Vaadin to create Liferay portlet. I was able to fix it by changing the CSS Vaadin uses (by using the CSS Inject Add-on, but it is also possible to just provide a custom Vaadin theme). The piece of CSS that worked for me is:

.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}

这篇关于按钮悬停效果在按钮被点击/聚焦后不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！