Question

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

我将Button设置为BaseTheme.BUTTON_LINK，并显示一个图标。按钮被分配一个具有悬停状态的CSS类，当按钮悬停时，我想将按钮的背景更改为白色。当我用萤火虫扩大该区域时，它给出了这个：

<div class="v-slot v-slot-link" style="width: 25%; margin-left: 0px;">
 <div class="v-button v-widget link v-button-link" tabindex="0" role="button">
  <span class="v-button-wrap">
  <img class="v-icon" alt="" src="http://localhost:8081/VaadinButtonPanel/APP/connector/42/277/icon/duke.png">
  <span class="v-button-caption">Click Me</span>
 </span>
</div>
</div>

所以我用css风格写了这个，但它对我不起作用：

  .v-button-link  .v-slot .v-slot-link .v-button-caption:hover{
     color: #1b699f;
     background : #FFF;
    }

任何想法都将受到赞赏。

Answer 1

仔细查看您的选择器。它与您的html结构不匹配

.v-slot.v-slot-link .v-button-link .v-button-caption:hover

将是一个工作选择器

Answer 2

.v-button-caption:hover{
 color: #1b699f;
 background : #FFF;
}

尝试这可能它会起作用，它在这里工作DEMO

Answer 3

我认为你过分复杂了CSS。

这应该有效：

.v-button-caption:hover{
     color: #1b699f;
     background : #FFF;
    }

在这里演示：http://jsbin.com/eyAxEti/1/edit

当它徘徊时，着色按钮链接背景区域

3 个答案: