How would I create a hover effect, where when I hover over a number a circle background appears?
The best example of this is on google calendar. Hover over a date number to see. Thanks!
How would I create a hover effect, where when I hover over a number a circle background appears?
The best example of this is on google calendar. Hover over a date number to see. Thanks!
Something like
<p class="number">
<span>1</span>
</p>
.number {
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: transparent;
}
number:hover {
background-color: red;
}
.number span {
font-size: 1rem;
line-height: 0;
}
(Sorry, not tested)