andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update format

Browse Source
This commit is contained in:
Angelos Chalaris
2020-04-30 13:21:04 +03:00
parent d9fd2d23c3
commit 2fbd3e0737
55 changed files with 412 additions and 571 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
snippets/navigation-list-item-hover-and-focus-effect.md
View File

@ -5,6 +5,10 @@ tags: visual,beginner
Fancy hover and focus effect at navigation items using transform CSS property.
- Use the `:before` pseudo-element at the list item anchor to create a hover effect, hide it using `transform: scale(0)`.
- Use the `:hover` and `:focus` pseudo-selectors to transition to `transform: scale(1)` and show the pseudo-element with its colored background.
- Prevent the pseudo-element from covering the anchor element by using `z-index: -1`.
```html
<nav class="hover-nav">
<ul>
@ -54,9 +58,3 @@ li a:focus:before {
transform: scale(1);
}
```
#### Explanation
- Use the `:before` pseudo-element at the list item anchor to create a hover effect, hide it using `transform: scale(0)`.
- Use the `:hover` and `:focus` pseudo-selectors to transition to `transform: scale(1)` and show the pseudo-element with its colored background.
- Prevent the pseudo-element from covering the anchor element by using `z-index: -1`.