Функция загрузки ловушки для начальной загрузки

Question

Я чувствую себя довольно расстроенным, узнав, что класс кнопки начальной загрузки, по-видимому, разрушает функцию наведения в стандартном CSS.

Я не очень хотел использовать всплывающие подсказки, поэтому решил попробовать сделать свой собственный серый квадрат рядом с моей кнопкой, чтобы показать, почему он отключен при наведении. Вот мой код:

HTML

<a class="btn btn-danger disabled" disabled="disabled" href="" id="statement-delete" onclick="return false;">Delete 
    <span id="delete-info"></span> 
</a> 

CSS

#statement-delete:hover #delete-info { 
    display: block; 
} 

#delete-info { 
    display: none; 
    background: #C8C8C8; 
    margin-left: 0px; 
    padding: 10px; 
    position: absolute; 
    z-index: 1000; 
    width:200px; 
    height:100px; 
} 

Я думал, что я, конечно, должен делать что-то не так, пока я не использовал JSFiddle, и он волшебным образом работал (перед добавлением справочник Bootstrap). Однако, как только я добавил ссылку на Bootstrap, не висения ...

Вот скрипка: http://jsfiddle.net/ga82Lbm5/1/

Если вы удалите ссылку на самонастройки слева, вы увидите, что это работает.

Возможно ли использовать функцию Hover над кнопкой Bootstrap? Или мне придется прибегнуть к использованию какого-либо пользовательского jQuery для этого?

Answer 1

Bootstrap добавляет правило pointer-events:none к вашему коду для отключенных элементов, чтобы предотвратить зависание. Вы можете отменить это, возвращаясь изменение с:

a.btn.disabled { 
    pointer-events: auto; 
} 

jsFiddle example

Answer 2

Я предлагаю вам удалить свойство disabled="disabled", поскольку вы хотите функция hover. Логически, если вы думаете об этом, элемент должен быть «включен» для работы hover. Аналогичным образом, вы также можете удалить класс класса CSS disabled по той же причине.

Вещь Bootstrap добавляет свойство pointer-events: none; к классу disabled. Определение этого свойства (заимствованные из Mozilla Developer Network (https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events)) является:

CSS свойство указатель событий позволяет авторам контролировать при каких обстоятельствах (если таковые имеются) определенный графический элемент может стать Цель событий мыши.

Вы решение действительно свести к нулю влияние этого свойства .Таким образом, удаление вышеупомянутых свойств, это работает. Смотрите ниже:

#statement-delete:hover #delete-info { 
 
    display: block; 
 
} 
 

 
#delete-info { 
 
    display: none; 
 
    background: #C8C8C8; 
 
    margin-left: 0px; 
 
    padding: 10px; 
 
    position: absolute; 
 
    z-index: 1000; 
 
    width:200px; 
 
    height:100px; 
 
    top: 48px; 
 
    left: 0px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<a class="btn btn-danger" href="" id="statement-delete" onclick="return false;">Delete<span id="delete-info"></span></a>