HTML设置悬停效果,css悬停效果

.draw-outline {

box-shadow:inset 0 0 0 2px #000;

color:#000;

-webkit-transition:color 0.25s 0.125s;

transition:color 0.25s 0.125s;

position:relative;

}

.draw-outline::before,.draw-outline::after {

border:0 solid transparent;

box-sizing:border-box;

content:'';

pointer-events:none;

position:absolute;

width:0;

height:0;

}

.draw-outline::before {

top:0;

right:0;

}

.draw-outline::after {

left:0;

bottom:0;

}

.draw-outline::after {

border-top-width:2px;

border-left-width:2px;

}

.draw-outline::before {

border-bottom-width:2px;

border-right-width:2px;

}

.draw-outline:hover {

color:#00a0e9;

}

.draw-outline:hover::before,.draw-outline:hover::after {

border-color:#00a0e9;

-webkit-transition:border-color 0s,height 0.25s,width 0.25s;

transition:border-color 0s,height 0.25s,width 0.25s;

width:100%;

height:100%;

}

.draw-outline:hover::before {

-webkit-transition-delay:0s,0s,0.25s;

transition-delay:0s,0s,0.25s;

}

.draw-outline:hover::after {

-webkit-transition-delay:0.5s,0.5s,0.75s;

transition-delay:0.5s,0.5s,0.75s;

}

.btn {

background:none;

border:none;

cursor:pointer;

line-height:1.5;

font:700 1.2rem 'Roboto Slab',sans-serif;

padding:1em 2em;

letter-spacing:0.05rem;

}

.btn:focus {

outline:2px dotted #55d7dc;

}