Question

HTML CODE

<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：焦点代码。

Answer 1

您可以使用转换速记来指定以不同方式转换样式。

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

当给出两个值时，第一个值是延迟，第二个值是持续时间

更多信息： https://developer.mozilla.org/en-US/docs/Web/CSS/transition

Answer 2

您应指定要应用转换的属性，以便其他属性（，如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/

演示

同一元素的延迟和延迟？

2 个答案: