CODEWITHSUNDEEP
htmlcssfirefoxhover
Mr A
Mr A

Reputation: 53

Hover on button does not work on Firefox

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>

Upvotes: 5

Views: 431

Answers (1)

Dominik Krzywiecki
Dominik Krzywiecki

Reputation: 425

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.

Upvotes: 3

Related Questions