1

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

3 に答える 3

1

Vaadin を使用して Liferay ポートレットを作成したときに、同じ問題に遭遇しました。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は、。以外のHTML要素にリンク状態を適用しないため、このタグも使用する必要があります<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 に答える