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
<nav>
<a href="#">Item 01</a>
<a href="#">Item 02</a>
<a href="#">Item 03</a>
<a href="#">Item 04</a>
<a href="#">Item 05</a>
<a href="#">Item 06</a>
</nav>
<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
nav {
cursor: default;
display: flex;
}
a {
color: #333;
font-weight: bold;
font-family: sans-serif;
text-decoration: none;
padding: 8px 16px;
span {
padding: 0 1rem;
transition: opacity 0.2s;
}
nav:hover a:not(:hover) {
opacity: 0.4;
.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. `display: flex ` enables flexbox.
2. `transition: opacity 0.2s` means changes to opacity will be transitioned over 0.2 seconds.
3. `nav:hover a:not(:hover)` changes the opacity of un-hover childs to 0.4.
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
✅ No caveats.
<span class="snippet__support-note">✅ No caveats.</span>
<!-- tags: interactivity -->