Цвет фона на кнопке input type =: состояние зависания в IE

У меня есть кнопка input type = с заданным цветом фона и другим на: hover - см. http://jsfiddle.net/hc2Eu/3/

В IE (все версии) - когда я нажимаю на кнопку, отодвигаю ее, затем нажимаю - цвет фона остается в настройке: hover, пока вы снова не наведете на него указатель мыши.

Есть ли обходной путь для этого? Желательно не с js? (IE6 не требуется)


background-color css internet-explorer hover
person ScottR    schedule 11.04.2011    source источник

Ответы (3)


arrow_upward
13
arrow_downward

Возможно, в <input type="button"> есть исправление, но если оно есть, я этого не знаю.

В противном случае хорошим вариантом будет заменить его тщательно оформленным элементом a.

Пример: http://jsfiddle.net/Uka5v/.

.button {
    background-color: #E3E1B8; 
    padding: 2px 4px;
    font: 13px sans-serif;
    text-decoration: none;
    border: 1px solid #000;
    border-color: #aaa #444 #444 #aaa;
    color: #000
}

Плюсы включают в себя то, что элемент a будет одинаково стилизован для разных (более старых) версий Internet Explorer без каких-либо дополнительных действий, и я думаю, что моя ссылка выглядит лучше, чем эта кнопка :)

person thirtydot    schedule 11.04.2011
comment
Я думал об этом, но я имею дело с уже существующей системой, в которой логика была назначена для элементов ввода, отправки форм и т. Д. (Пожалуйста, не спрашивайте подробностей :) Рефакторинг всего этого кода только для исправления сбоя IE может не стоить. - person ScottR; 12.04.2011
comment
Даю вам принятый ответ - потому что я не думаю, что это возможно со стандартными кнопочными элементами. - person ScottR; 12.04.2011
comment
Градиенты и переходы не работают вместе, кажется, единственный ответ: stackoverflow.com/questions/3790273/ - person Peter Ehrlich; 07.02.2013

arrow_upward
7
arrow_downward

Попробуйте использовать селектор атрибутов type, чтобы найти кнопки (возможно, это тоже исправит):

input[type=button]
{
  background-color: #E3E1B8; 
}

input[type=button]:hover
{
  background-color: #46000D
}
person Blender    schedule 11.04.2011
comment
Это не проблема выбора CSS - цвета применены правильно. Есть проблема с перемещением мыши из кнопки, когда она находится в активном состоянии - такая же проблема с ‹button›. - person ScottR; 12.04.2011
comment
Хм. Думаю, пора обыграть компьютер и кричать непристойности, так как я не знаю, как обмануть IE, чтобы это сделать. - person Blender; 12.04.2011

arrow_upward
1
arrow_downward

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

    background:url(egg.png) no-repeat 70px 2px #82d4fe; /* Old browsers */
background:url(egg.png) no-repeat 70px 2px, -moz-linear-gradient(top, #82d4fe 0%, #1db2ff 78%) ; /* FF3.6+ */
background:url(egg.png) no-repeat 70px 2px, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#82d4fe), color-stop(78%,#1db2ff)); /* Chrome,Safari4+ */
background:url(egg.png) no-repeat 70px 2px, -webkit-linear-gradient(top, #82d4fe 0%,#1db2ff 78%); /* Chrome10+,Safari5.1+ */
background:url(egg.png) no-repeat 70px 2px, -o-linear-gradient(top, #82d4fe 0%,#1db2ff 78%); /* Opera11.10+ */
background:url(egg.png) no-repeat 70px 2px, -ms-linear-gradient(top, #82d4fe 0%,#1db2ff 78%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82d4fe', endColorstr='#1db2ff',GradientType=0 ); /* IE6-9 */
background:url(egg.png) no-repeat 70px 2px, linear-gradient(top, #82d4fe 0%,#1db2ff 78%); /* W3C */
person Jason Paul    schedule 08.06.2011