悬停时着色按钮链接背景区域答案

【问题标题】：Coloring button link background area when it's hovered悬停时着色按钮链接背景区域
【发布时间】：2013-12-05 23:42:20
【问题描述】：

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

我有一个样式为 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;
    }

任何想法都会受到赞赏。

【问题讨论】：

标签： css vaadin

【解决方案1】：

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

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

将是一个有效的选择器

【讨论】：

不，我不是，因为这是两个类的同一个元素（如果选择器需要两个类，这是可以讨论的，但我只是重新排列了给定的一个以使其匹配）
我忘记了 :hover，你把它包括进去了吗？也许你需要一个 !important 因为其他风格比你的更重要？

【解决方案2】：

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

试试这个也许它会工作，它在这里工作DEMO

【讨论】：

【解决方案3】：

我认为您使 CSS 过于复杂。

这应该可行：

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

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

【讨论】：