Окраска кнопки ссылки на область фонового изображения, когда она зависает

Question

Я разрабатываю веб-приложение с использованием каркаса Vaadin.

У меня есть кнопка в стиле 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

Я думаю, что вы усложнять КСС.

Это должно работать:

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

Демо здесь: http://jsbin.com/eyAxEti/1/edit