This might be pushing the limits of CSS hover transitions (it's certainly pushing the limits of my novice understanding) but here's what I'm trying to do:
I have a menu bar along top of the screen, and there's a "Home" link there. When you hover over it, two additional links--"Writings" and "Music"--should appear above and below "Home", respectively.
Not just appear, though... I want them to fade in from invisible to visible. And when you leave the area, they fade back out and disappear.
Actually, the two links should probably fade in when your mouse hovers over the whole list, since I don't want them disappearing when your mouse leaves "home" and tries to click "writings" or "music".
Anyway, what I tried hasn't worked. Right now nothing happens. The two extra links stay invisible and nothing changes when I hover over.
Note: I have borders around the list so I can track everything easier (I'm kinda new).
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* MY CODE BELOW */
.header { /* MENU BAR ACROSS THE TOP */
display: flex;
flex-direction: row;
width: 100%;
height: 150px;
background-color: black;
opacity: 0.8;
position: absolute;
left : 0;
align-items: center;
}
.home { /* LIST CONTAINER */
border: 1px solid red;
display: flex;
flex-direction: column;
margin-left: 5%;
color: white;
font-family: 'heebo';
font-size: 30px;
text-align: center;
width: 100px;
}
.home ul{ /* LIST O' LINKS */
width: 100%;
border: 1px solid green;
display: flex;
flex-direction: column;
}
.homeW{ /* 'WRITINGS' LINK */
border: 1px solid yellow;
text-decoration: none;
opacity: 0;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
.homeH{ /* 'HOME' LINK */
border: 1px solid purple;
text-decoration: none;
}
.homeM{ /* 'MUSIC' LINK */
border: 1px solid pink;
text-decoration: none;
opacity: 0;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
.homeH:hover .homeW { /* ON 'HOME' HOVER, 'WRITINGS' APPEARS */
opacity: 1.0;
transition: opacity .55s ease-in-out;
-moz-transition: opacity .55s ease-in-out;
-webkit-transition: opacity .55s ease-in-out;
}
.homeH:hover .homeM { /* ...AND SO DOES 'MUSIC' */
opacity: 1.0;
transition: opacity .55s ease-in-out;
-moz-transition: opacity .55s ease-in-out;
-webkit-transition: opacity .55s ease-in-out;
}
.header a { /* LINKS ARE WHITE (WHEN THEY ARE VISIBLE) */
color: white;
}<div class="header">
<div class="home">
<ul>
<li>
<a class="homeW" href="#">Writing</a>
</li>
<li>
<a class="homeH" href="#">Home</a>
</li>
<li>
<a class="homeM" href="#">Music</a>
</li>
</ul>
</div>
</div>You can't affect siblings if they are before the hovered element in DOM order. Instead, check for the whole list to be hovered, see your updated snippet below.
Further explanation: Starting with your list
<ul>
<li>
<a class="homeW" href="#">Writing</a>
</li>
<li>
<a class="homeH" href="#">Home</a>
</li>
<li>
<a class="homeM" href="#">Music</a>
</li>
</ul>
Your link a.homeH is inside an li element. CSS currently does not support any parent selector. Your selector .homeH:hover .homeW would only affect an element with class .homeW that's a child of another element with class .homeH while being hovered.
Even if your li elements would have the same class, you could only do li.homeH:hovered ~ li.homeM, that would be applied to the Music bullet point (~ is the siblings selector), but it wouldn't work for Writing since that list item is BEFORE the actual home list item.
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* MY CODE BELOW */
.header {
/* MENU BAR ACROSS THE TOP */
display: flex;
flex-direction: row;
width: 100%;
height: 150px;
background-color: black;
opacity: 0.8;
position: absolute;
left: 0;
align-items: center;
}
.home {
/* LIST CONTAINER */
border: 1px solid red;
display: flex;
flex-direction: column;
margin-left: 5%;
color: white;
font-family: 'heebo';
font-size: 30px;
text-align: center;
width: 100px;
}
.home ul {
/* LIST O' LINKS */
width: 100%;
border: 1px solid green;
display: flex;
flex-direction: column;
}
.homeW {
/* 'WRITINGS' LINK */
border: 1px solid yellow;
text-decoration: none;
opacity: 0;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
.homeH {
/* 'HOME' LINK */
border: 1px solid purple;
text-decoration: none;
}
.homeM {
/* 'MUSIC' LINK */
border: 1px solid pink;
text-decoration: none;
opacity: 0;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
.home:hover .homeW {
/* ON 'HOME' HOVER, 'WRITINGS' APPEARS */
opacity: 1.0;
transition: opacity .55s ease-in-out;
-moz-transition: opacity .55s ease-in-out;
-webkit-transition: opacity .55s ease-in-out;
}
.home:hover .homeM {
/* ...AND SO DOES 'MUSIC' */
opacity: 1.0;
transition: opacity .55s ease-in-out;
-moz-transition: opacity .55s ease-in-out;
-webkit-transition: opacity .55s ease-in-out;
}
.header a {
/* INKS ARE WHITE (WHEN THEY ARE VISIBLE) */
color: white;
}<div class="header">
<div class="home">
<ul>
<li>
<a class="homeW" href="#">Writing</a>
</li>
<li>
<a class="homeH" href="#">Home</a>
</li>
<li>
<a class="homeM" href="#">Music</a>
</li>
</ul>
</div>
</div>