Firefox上でホバーボタンが機能しない

Question

ホバリングしたときにサイズが大きくなるボタンがいくつかコーディングされました。
これはChromeで完全に機能しますが、Firefoxでは何もしません。

どうなりますか？

.P1 { 
 
    background-color: transparent; 
 
    border: 0; 
 
    background-repeat: no-repeat; 
 
    width: 80px; 
 
    height: 110px; 
 
} 
 
.roundB { 
 
    height: 60%; 
 
    width: 80%; 
 
} 
 
.roundB:hover { 
 
    border: 2px solid black; 
 
    border-radius: 50%; 
 
    height: 100%; 
 
    width: 115%; 
 
}

<div class="span12 buttonLoc"> 
 
    <div> 
 
    <button type="button" class="P1" data-toggle="modal" data-target="#myModal"> 
 
     <img src="../imgs/P1.png" class="roundB" title="Meet Sir Workalot" /> 
 
    </button> 
 
    <button type="button" class="P1" data-toggle="modal" data-target="#myModal1"> 
 
     <img src="../imgs/P2.png" class="roundB" title="Meet Cory" /> 
 
    </button> 
 
    <button type="button" class="P1" data-toggle="modal" data-target="#myModal2"> 
 
     <img src="../imgs/P3.png" class="roundB" title="Meet Azure" /> 
 
    </button> 
 
    <button type="button" class="P1" data-toggle="modal" data-target="#myModal3"> 
 
     <img src="../imgs/P4.png" class="roundB" title="Meet Patonaldo" /> 
 
    </button> 
 
    <button type="button" class="P1" data-toggle="modal" data-target="#myModal4"> 
 
     <img src="../imgs/P5.png" class="roundB" title="Meet Buggy" /> 
 
    </button> 
 
    <button type="button" class="P1" data-toggle="modal" data-target="#myModal5"> 
 
     <img src="../imgs/P6.png" class="roundB" title="Meet the Zebras" /> 
 
    </button> 
 
    </div> 
 
</div>

Answer 1

のFirefoxのみ（buttonタグ内の要素を見ていない）ボタンのホバーを受け入れています。セレクタ.roundB:hoverを.P1:hover .roundBに置き換えると、chromeのように同じように動作します。