Почему: наведение css не запускается в теге кнопки? (с firefox)

Question

У меня есть класс CSS с эффектом :hover.

Я хочу, чтобы объем его в но это does't рабочая:

.test 
 
{ 
 
background-color: blue; 
 
} 
 

 
.test:hover 
 
{ 
 
    background-color: red; 
 
}

<button><span class="test">test</span></button> 
 
<span class="test">test</span>

EDIT: другой пример: http://jsfiddle.net/zge5nzq8/2/

Так почему и как я могу сделать?

EDIT: он работает с Chrome, но не FF.

Answer 1

Это работает для меня в Firefox: (скрипку здесь http://jsfiddle.net/2zLfsm02/)

.test 
{ 
background-color: blue; 
} 

.test:hover, button:hover span.test 
{ 
    background-color: red; 
} 

и HTML тот же:

<button><span class="test">test</span></button> 
<span class="test">test</span> 

** Вы можете быть более конкретно с стилем в моем примере (кнопка: h over span.test) и дать этой кнопке класс.

Answer 2

Вам нужно что-то вроде этого?

.test 
 
{ 
 
background-color: blue; 
 
} 
 

 
.test:hover 
 
{ 
 
    background-color: red; 
 
}

<button class="test"><span >test</span></button> 
 
<span class="test">test</span>