No edit summary |
No edit summary |
||
(4 intermediate revisions by the same user not shown) | |||
Line 7: | Line 7: | ||
width: 60px; | width: 60px; | ||
height: 51px; | height: 51px; | ||
outline: solid 2px white; | |||
} | } | ||
Line 14: | Line 15: | ||
height: 51px; | height: 51px; | ||
outline: solid 3px yellow; | outline: solid 3px yellow; | ||
outline-offset: | outline-offset: 7px; | ||
visibility: hidden; | visibility: hidden; | ||
} | |||
.ci-parent { | |||
margin: 3px; | |||
} | } | ||
Line 23: | Line 28: | ||
} | } | ||
.ci-parent:hover .ci { | .ci-parent:hover .ci-background { | ||
outline: solid 3px yellow; | outline: solid 3px yellow; | ||
animation: blinker 1s linear infinite; | animation: blinker 1s linear infinite; |
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; } }