Hover on button does not work on Firefox

By : Mr A
Source: Stackoverflow.com

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

By : Mr A


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.

John Papa who is the nationally recognized "guru" on Angular and he recommends creating controllers as in your first example. See HERE for usage.

By : BSmall


This video can help you solving your question :)
By: admin