Отключить эффект при наведении курсора css, если для пользовательской кнопки значение ng отключено.

0

Я пытаюсь отключить пользовательскую button а функция disable (pointer) работает нормально.

Проблема в том, что когда мы hover на кнопку, hover все еще работает. Следовательно, мне нужно также отключить зависание.

Мне нужно применить ng-disable для нескольких пользовательских buttons и я не могу переопределить css для каждой кнопки.

jsfiddle.net/q8r4e/1389/

Код:

<button class="bt1" ng-disabled="true" >BUTTON</button>
<button class="bt2" ng-disabled="true" >BUTTON</button>

.bt1{
background-color: #e38000;
    border: 0 none;
    border-radius: 15px;
    color: #ffffff;
    font-size: 14px;
    height: 30px;
    width: 135px;
}
.bt1:hover{
background-color: #ffff00;
    color: #999;
}

.bt2{
background-color: #33b3e3;
    border: 0 none;
    border-radius: 15px;
    color: #ffffff;
    font-size: 14px;
    height: 30px;
    width: 135px;
}
.bt2:hover{
background-color: #a2ddf4;
    color: #999;
}

Заранее спасибо.

Теги:

1 ответ

0
Лучший ответ

Вместо

.bt1:hover{
    background-color: #ffff00;
    color: #999;
}
.bt2:hover{
    background-color: #a2ddf4;
    color: #999;
}

использование

.bt1:not([disabled]):hover{
    background-color: #ffff00;
    color: #999;
}
.bt2:not([disabled]):hover{
    background-color: #a2ddf4;
    color: #999;
}

Рабочая скрипка

РЕДАКТИРОВАТЬ:

Чтобы иметь общий CSS для ВСЕХ отключенных кнопок, вы можете просто добавить

button:disabled, button:disabled:hover{
    background-color:red;
}

и замените красный цвет тем, что вы хотите.

Обновленный скрипт

Поделиться
  • 0
    Здесь проблема в том, что css уже написан для всех кнопок. Разве мы не можем сделать общий CSS для всех кнопок?
  • 0
    Да, ты можешь. Тем не менее, обе кнопки имеют разные цвета для активного и неактивного состояния
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню