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

Merge pull request #62 from thala321/patch-1

Browse Source 
[FEATURE] Create sibling-fade.md
This commit is contained in:
atomiks
2018-03-05 18:16:55 +10:00
committed by GitHub
parent 68da237415 2ca1ba3985
commit 48eab1afa0
1 changed files with 71 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
snippets/sibling-fade.md Normal file
View File

@ -0,0 +1,71 @@
### Sibling fade
Fades out the siblings of a hovered item.
#### HTML
```html
<div class="sibling-fade">
<span>Item 1</span>
<span>Item 2</span>
<span>Item 3</span>
<span>Item 4</span>
<span>Item 5</span>
<span>Item 6</span>
</div>
```
#### CSS
```css
span {
padding: 0 1rem;
transition: opacity 0.2s;
}
.sibling-fade:hover span:not(:hover) {
opacity: 0.5;
}
```
#### Demo
<div class="snippet-demo">
<nav class="snippet-demo__sibling-fade">
<span>Item 1</span>
<span>Item 2</span>
<span>Item 3</span>
<span>Item 4</span>
<span>Item 5</span>
<span>Item 6</span>
</nav>
</div>
<style>
.snippet-demo__sibling-fade {
cursor: default;
line-height: 2;
vertical-align: middle;
}
.snippet-demo__sibling-fade span {
padding: 1rem;
transition: opacity 0.2s;
}
.snippet-demo__sibling-fade:hover span:not(:hover) {
opacity: 0.5;
}
</style>
#### Explanation
1. `transition: opacity 0.2s` specifies that changes to opacity will be transitioned over 0.2 seconds.
2. `.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`.
#### Browser support
<span class="snippet__support-note">✅ No caveats.</span>
<!-- tags: interactivity -->