Member 14460691 Ответов: 4

Onhover on CSS не работает с отключенными элементами

Я пытаюсь сделать что-то с помощью css, и я обнаружил, что hover не работает на отключенных элементах.

Что я уже пробовал:

HTML:
<div class='text'>
     hi
</div>

<button id='btn' disabled>hi</button>

CSS:
#text {
  display: none; 
}
#btn:hover + #text{
  display: block;
}

Richard Deeming

Отключенные кнопки вообще плохая идея в любом случае:
Отключенные кнопки сосут - Axess Lab[^]

4 Ответов

Рейтинг:
2

Harsh.Shah.ifour

Привет
Наведение работает на отключенную кнопку. я попытался запустить ваш код и обнаружил одну синтаксическую ошибку. но тогда, решая его, ваш код работает сейчас. Взгляните сюда: Наведите курсор мыши на кнопку отключено[^] 

<div class='text'>
     hi
</div>
вы использовали текст в качестве класса в вышеприведенном div, но когда вы применяете наведение курсора мыши на отключенную кнопку, вы применяете текст в качестве идентификатора, поэтому ваш код не работает должным образом.

Сделайте это исправление. и вы получите правильный результат. дайте мне знать, если у вас возникнут какие-либо вопросы.
Надеюсь, это вам поможет. Спасибо.

Richard Deeming

Хороший улов!

Стоит также отметить, что текст <div> нужно прийти после кнопка в HTML-разметке. В вопросе это выглядит так, как будто это было до кнопки.

[no name]

правильно!! это тоже может быть причиной.

Рейтинг:
1

Parth Munjpara 

button:hover:enabled{
    /*your styles*/
}
button:active:enabled{
    /*your styles*/
}


просто попробуйте этот css-код и посмотрите, что получится на выходе

Рейтинг:
0

W∴ Balboos, GHB

Вам было бы лучше использовать события, которые вы контролируете.

Поскольку это отключенный элемент управления, вы не можете использовать onfocus, но вы можете использовать onmouseover и onmouseout. Оттуда вы можете делать все, что захотите для события hover.

Рейтинг:
0

Member 14665733

просто используйте :enabled with :hover, чтобы решить вашу проблему
Пример : -

#btn:hover:enabled {
    // it will work only on that time when button will be enabled.
}