Hover on button does not work on Firefox

Question

I've coded some buttons that increase in size when hovered.
It works perfectly on Chrome, yet on Firefox it doesn't do anything.

What's going 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 is only accept hover on button (not see elements inside button tag). If You replace selector .roundB:hover to .P1:hover .roundB this will works the same like now on chrome.