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