悬停在按钮上不适用于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 只接受悬停在按钮上（看不到按钮标签内的元素）。如果您将选择器替换.roundB:hover为此选项.P1:hover .roundB，则其工作方式与现在在 chrome 上的工作方式相同。