Coloring button link background area when it's hovered

问题

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

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

Any idea will be appreciated.

回答1:

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

would be a working selector

回答2:

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

try this maybe it would work, it's working here DEMO

回答3:

I think you are overcomplicating the CSS.

This should work:

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

Demo here: http://jsbin.com/eyAxEti/1/edit

来源：https://stackoverflow.com/questions/20403845/coloring-button-link-background-area-when-its-hovered