Разве jQuery не запускает событие зависания на отключенной кнопке? - PullRequest
Новая
       20

Разве jQuery не запускает событие зависания на отключенной кнопке?

14 голосов
/ 26 февраля 2012

Я реализую форму, в которой хочу отключить button и показать подсказку, объясняющую, почему он отключен при наведении.Однако, когда button отключено, всплывающая подсказка не отображается.

Я добавил тестовый пример, воспроизводя его только с помощью jQuery: http://jsfiddle.net/BYeFJ/1/

Похоже, что jQuery не запускает событие или браузер не запускает событие hover?

Я использую Модуль всплывающей подсказки Twitter Bootstrap и, конечно, jQuery.

Примечание: я также пробовал это с оберткой вокруг кнопки - но она глотаеткажется, что при наведении курсора, я также пытался использовать элемент input, чтобы получить тот же эффект.

Ответы [ 5 ]

15 голосов
/ 26 февраля 2012

Вы можете наложить прозрачное наложение поверх кнопки и навести на него подсказку.

http://jsfiddle.net/yL2wN/

<div id="wrapper">
    <div id="overlay"></div>                
    <button disabled>BUTTON</button>
</div>

#wrapper{
    position: relative;   
}
#overlay{
    position: absolute;        
    top: 0;
    left: 0;

    opacity: .1;
    height: 20px;
    width: 70px;
}​

В скрипке я установил синий цвет, чтобы вы могли видеть, что происходит. Ширина и высота наложения могут быть отрегулированы по необходимости или сделаны динамическими в js.

2 голосов
/ 17 января 2013

Одно из возможных решений - сделать его готовым только: 

<button id="disabledbutton" readonly="readonly">Disabled Button</button>

Затем измените CSS, чтобы он выглядел отключенным, и отмените нажатие кнопки мыши, чтобы предотвратить любые действия: 

$('#disabledbutton').click(function() { return false; } );
1 голос
/ 13 октября 2016

Это может помочь 

<style>
 .btn{
   padding: 0 !important; // or get padding size of .btn
 }

 .button{
  padding: 8px 30px 6px;
 }
</style>

<body>
 <button type="submit" id="submit_form" class="btn" disabled/>
  <div class="button">Submit</div>
 </button>

 <script>
  $('.button').hover(function (){
    // place code here
  });
 </script>
</body>
1 голос
/ 16 января 2015

Добавьте классы 'ui-button-disabled' и 'ui-state-disabled', чтобы они выглядели как отключенные кнопки, и проверьте их в функции щелчка, чтобы определить состояние.Удалите их, когда вам нужен включенный вид.

1 голос
/ 10 сентября 2014

Следуйте указаниям Джеймса, я пробовал вот так 

<div id="wrapper">
<button id='overlay'>BUTTON</button>
<button disabled>BUTTON</button></div>

#overlay{
position: absolute;
opacity: 0;}

Я положил поддельную кнопку с тем же текстом перед старым и установил для него идентификатор. В CSS я установил положение, чтобы эта новая кнопка стала относительной с оберткой, чтобы эта новая кнопка была помещена в то же пространство с отключенной кнопкой.

Вот моя скрипка: http://jsfiddle.net/p2j041Ln/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...