html - 使用 CSS 使两个链接在悬停在不同链接上时淡入

标签 html css hover css-transitions fade

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

我在屏幕顶部有一个菜单栏，那里有一个“主页”链接。当你将鼠标悬停在它上面时，两个额外的链接——“Writings”和“Music”——应该分别出现在“Home”的上方和下方。

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

实际上，当您的鼠标悬停在整个列表上时，这两个链接可能会淡入，因为我不希望它们在您的鼠标离开“主页”并尝试单击“文字”或“音乐”时消失。

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

注意:我在列表周围设置了边框，这样我可以更轻松地跟踪所有内容(我是新手)。

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>

最佳答案

如果同胞在 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>

您的链接 a.homeH 位于 li 元素内。 CSS 目前不支持任何父选择器。您的选择器 .homeH:hover .homeW 只会影响类 .homeW 的元素，该元素是类 .homeH 的另一个元素的子元素悬停。

即使您的 li 元素具有相同的类，您也只能执行 li.homeH:hovered ~ li.homeM，这将应用于音乐元素符号点(~ 是兄弟选择器)，但它不适用于 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>

关于html - 使用 CSS 使两个链接在悬停在不同链接上时淡入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38047078/

上一篇：javascript - $scope 更改后 ng-repeat 不会第二次触发

下一篇：javascript - HTML\JavaScript 中基于时间的链接

相关文章：

css - 在下拉列表中悬停子 ul 时，如何保持父 ul 的悬停？

javascript - HTML5 Canvas - 移动对象的最佳实践

javascript - 悬停 div mouseout 超时/淡入淡出延迟？

javascript - 悬停切换图像故障

css - 在 Ipad 上来回悬停菜单问题

一个元素的 jQuery onfocus 有另一个元素可点击

html - 如何在html中排列这5个图表？

HTML - 基于滚动的位置页脚

javascript - 如何在 html 和 javascript 中使用 dataTable 和 getelementbyid ？

php - 面临一些CSS问题

©2024 IT工具网  联系我们