No edit summary |
No edit summary |
||
(20 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
.ci { | .ci { | ||
background: gray; | |||
} | } | ||
.ci-background { | .ci-background { | ||
position: absolute; | |||
width: | width: 60px; | ||
height: 51px; | |||
outline: solid 2px white; | |||
} | } | ||
.ci-highlight { | .ci-highlight { | ||
width: | position: absolute; | ||
width: 60px; | |||
height: 51px; | |||
outline: solid 3px yellow; | |||
outline-offset: 7px; | |||
visibility: hidden; | visibility: hidden; | ||
} | } | ||
.ci- | .ci-parent { | ||
margin: 3px; | |||
} | |||
.ci-parent:hover .ci-highlight { | |||
visibility: visible; | visibility: visible; | ||
animation: blinker 1s linear infinite; | animation: blinker 1s linear infinite; | ||
} | } | ||
.ci- | .ci-parent:hover .ci-background { | ||
outline: solid 3px yellow; | |||
animation: | animation: blinker 1s linear infinite; | ||
animation-delay: 0.2s; | |||
animation: | |||
} | } | ||
Latest revision as of 13:58, 20 May 2025
.ci { background: gray; } .ci-background { position: absolute; width: 60px; height: 51px; outline: solid 2px white; } .ci-highlight { position: absolute; width: 60px; height: 51px; outline: solid 3px yellow; outline-offset: 7px; visibility: hidden; } .ci-parent { margin: 3px; } .ci-parent:hover .ci-highlight { visibility: visible; animation: blinker 1s linear infinite; } .ci-parent:hover .ci-background { outline: solid 3px yellow; animation: blinker 1s linear infinite; animation-delay: 0.2s; } @keyframes blinker { 50% { opacity: 0; } }