The Hover on button does not work in Firefox.

Question

I have encoded several buttons that increase in size when you hover over.
It works fine on Chrome, but it does nothing on Firefox.

What will go wrong?

.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 only accepts a hover button on a button (do not see the elements inside the button tag). If you replace the .roundB:hover selector with .P1:hover .roundB , it will work the same as it is now on chrome.