着色按钮链接背景区域，当它悬停 [英] Coloring button link background area when it's hovered

问题描述

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

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

我有一个按钮样式为BaseTheme.BUTTON_LINK，并显示一个图标。按钮被分配一个CSS类，它有一个悬停状态，当按钮悬停我想改变按钮的背景为白色。
当我扩展了用firebug着色的区域时，它给出：

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 i want to change the background of the button to white color. When i expanded the area to be coloured with firebug, it gives this :

<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风格写了这篇文章，但是没有为我工作：

So i wrote this in css style but it didn't work for me :

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

任何想法都会感激。

推荐答案

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

Take a close look at your selector. It doesn't match your html structure

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

将是一个有效的选择器

这篇关于着色按钮链接背景区域，当它悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！