原因：按钮标签中没有触发悬停css？ （用firefox）

Question

我有一个具有:hover效果的CSS类。

我想要范围，但它不起作用：

＆＃13;

＆＃13;

.test
{
 background-color: blue;   
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

编辑：其他示例：http://jsfiddle.net/zge5nzq8/2/

那为什么以及如何做？

编辑：它与Chrome合作但不支持FF。

Answer 1

你需要这样的东西吗？

.test
{
 background-color: blue;   
}

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

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

Answer 2

这对我在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>

**您可能希望在我的示例中使用样式更具体（按钮：hover span.test）并为该按钮指定一个类。