Наведите курсор на кнопку не работает на Firefox

Я закодировал несколько кнопок, которые увеличиваются в размере при наведении курсора.
Он отлично работает на Chrome, но на Firefox он ничего не делает.Наведите курсор на кнопку не работает на 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>

источник

2016-09-28 Mr A

Я думаю, что это способ, как данные рендеринга firefox, попробуйте заменить кнопку с div, возможно, это сработало – mohade

Возможно, ошибка Firefox: [Ошибка 843003 - Дети кнопки не отвечают на: hover] (https: //bugzilla.mozilla .org/show_bug.cgi? id = 843003) – showdev

Woow, mohade, вот и все! Он нуждается в некоторых настройках, но он работает отлично. Я бы никогда не догадался об этом, спасибо большое: D –

Firefox будет принимать только парить на кнопку (не увидеть элементы внутри кнопки тега). Если вы замените селектор .roundB:hover на .P1:hover .roundB, это будет работать так же, как сейчас на хроме.

источник

2016-09-28 22:52:15

Хорошо определенно ваш ответ лучший. Он работает на 100%, и мне не нужно делать никаких корректировок, если я использую ваш совет. Большое спасибо за ваше время и помощь :) –

Наведите курсор на кнопку не работает на Firefox

ответ

Смежные вопросы