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

8
snippets/sibling-fade.md
View File

@ -5,6 +5,9 @@ tags: interactivity,intermediate
Fades out the siblings of a hovered item.
- `transition: opacity 0.2s` specifies that changes to opacity will be transitioned over 0.3 seconds.
- `.sibling-fade:hover span:not(:hover)` specifies that when the parent is hovered, select any `span` children that are not currently being hovered and change their opacity to `0.5`.
```html
<div class="sibling-fade">
<span>Item 1</span> <span>Item 2</span> <span>Item 3</span> <span>Item 4</span>
@ -22,8 +25,3 @@ span {
opacity: 0.5;
}
```
#### Explanation
- `transition: opacity 0.2s` specifies that changes to opacity will be transitioned over 0.3 seconds.
- `.sibling-fade:hover span:not(:hover)` specifies that when the parent is hovered, select any `span` children that are not currently being hovered and change their opacity to `0.5`.