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

Update sibling-fade.md

Browse Source
This commit is contained in:
atomiks
2018-03-05 18:16:46 +10:00
committed by GitHub
parent c2ed434e41
commit 2ca1ba3985
1 changed files with 49 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
snippets/sibling-fade.md
View File

@ -1,49 +1,71 @@
### sibling-fade ### Sibling fade
Fade out siblings around a hovered item Fades out the siblings of a hovered item.
#### HTML #### HTML
```html ```html
<nav> <div class="sibling-fade">
<a href="#">Item 01</a> <span>Item 1</span>
<a href="#">Item 02</a> <span>Item 2</span>
<a href="#">Item 03</a> <span>Item 3</span>
<a href="#">Item 04</a> <span>Item 4</span>
<a href="#">Item 05</a> <span>Item 5</span>
<a href="#">Item 06</a> <span>Item 6</span>
</nav> </div>
``` ```
#### CSS #### CSS
```css ```css
nav { span {
cursor: default; padding: 0 1rem;
display: flex;
}
a {
color: #333;
font-weight: bold;
font-family: sans-serif;
text-decoration: none;
padding: 8px 16px;
transition: opacity 0.2s; transition: opacity 0.2s;
} }
nav:hover a:not(:hover) { .sibling-fade:hover span:not(:hover) {
opacity: 0.4; opacity: 0.5;
} }
``` ```
#### Demo #### 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 #### Explanation
1. `display: flex ` enables flexbox. 1. `transition: opacity 0.2s` specifies that changes to opacity will be transitioned over 0.2 seconds.
2. `transition: opacity 0.2s` means 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
3. `nav:hover a:not(:hover)` changes the opacity of un-hover childs to 0.4. that are not currently being hovered and change their opacity to `0.5`.
#### Browser support #### Browser support
✅ No caveats.
<span class="snippet__support-note">✅ No caveats.</span>
<!-- tags: interactivity -->