Задержка и нет задержки на одном элементе?

0

HTML-код

<select name="server" id="server" class="nofocus">
   <option value="X">X</option>
     <option value="XX">XXE</option>
     <option value="XXX">XXX</option>
     </select>

CSS-код

#server { 
border: solid 1px #eeeeee;
  padding: .2em .25em .15em;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
    }

#server:focus { background: rgba(0, 34, 255, 0.2);
                transition-delay:0.5s;
 }

.nofocus:focus { color:#FFF00; }

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

Теги:

2 ответа

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

Необходимо указать свойство, к которому вы хотите применить переход, поэтому другие свойства (например, color) не будут затронуты.

#server:focus { 
    background: rgba(0, 34, 255, 0.2);
    transition:background;
    transition-delay:0.5s;
}

Кроме того, указанный вами цвет (#FFF00) неверен (имеет только 5 шестнадцатеричных цифр вместо 3 или 6)

Демо на странице http://jsfiddle.net/yLSXc/1/

  • 0
    Это опечатка, должно было быть # FF0000.
  • 0
    Работало отлично, спасибо.
1

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

#server {
transition: height 1s 1s, opacity 1s;
}

Когда заданы два значения, первым значением является задержка, вторая - длительность

Больше информации здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/transition

Ещё вопросы

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