使用 CSS 使两个 link 在悬停在不同的 link 上时淡入

Question

这可能会突破 CSS 悬停过渡的极限（这肯定会突破我的新手理解的极限），但这是我正在尝试做的事情：

我在屏幕顶部有一个菜单栏，那里有一个 "Home" link。当您将鼠标悬停在它上面时，另外两个 links--"Writings" 和 "Music"-- 应该分别出现在 "Home" 上方和下方。

但不只是出现...我希望它们从不可见淡入可见。当您离开该区域时，它们会淡出并消失。

实际上，当您的鼠标悬停在整个列表上时，两个 link 可能会淡入，因为我不希望它们在您的鼠标离开 "home" 并尝试单击 "writings" 或 "music".

总之，我试过没有用。现在什么都没有发生。两个额外的 links 保持不可见，当我将鼠标悬停在上面时没有任何变化。

注意：我在列表周围设置了边框，这样我可以更轻松地跟踪所有内容（我有点新）。

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>

Answer 1

如果兄弟姐妹在 DOM 顺序中位于悬停元素之前，则不能影响他们。相反，检查要悬停的整个列表，请参阅下面更新的代码段。

进一步说明：从您的列表开始

<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>

您的 link a.homeH 在 li 元素内。 CSS 目前不支持任何父级选择器。您的选择器 .homeH:hover .homeW 只会影响具有 class .homeW 的元素，该元素在悬停时是另一个具有 class .homeH 的元素的子元素。

即使您的 li 元素具有相同的 class，您也只能做 li.homeH:hovered ~ li.homeM，这将应用于音乐要点（~ 是siblings 选择器），但它不适用于 Writing，因为该列表项 BEFORE 实际的主列表项。

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>

Answer 2

我没有 100% 的解决方案，但您可以在元素 ul

上的 hover 上执行此操作

.home ul:hover li a{opacity: 1.0 !important; }

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;
}
.home ul:hover li a{opacity: 1.0 !important; }

<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>

Answer 3

说明 - 100% 的预期效果

HTML

将类从锚标记 <a> 移动到外部列表项 <li> 标记。
我将 Home 列表项移到了顶部，并更改了
的位置

CSS

使用了~CSSselect或select后续的兄弟姐妹。
已更改margin

代码

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 */
  margin:-60px 0px 30px 0px;/*----- added margin -----*/
  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 */
  margin-top: 30px; /*-----added margin-----*/
  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 ~ li { /*----- added ~ CSS selector-----*/
  /* ...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 class="homeH">
        <a href="#">Home</a>
      </li>
      <li class="homeW">
        <a href="#">Writing</a>
      </li>
      <li class="homeM">
        <a href="#">Music</a>
      </li>
    </ul>
  </div>
</div>

使用 CSS 使两个 link 在悬停在不同的 link 上时淡入

Using CSS to make two links fade in when hovering over a different link

html

css

hover

css-transitions

fade

说明 - 100% 的预期效果

HTML

CSS

代码