当鼠标悬停在不同的链接上时，使用CSS使两个链接淡入

时间：2016-06-27 06:20:55

标签： html css hover css-transitions fade

这可能会推动CSS悬停过渡的极限（它肯定会推动我新手理解的极限），但这就是我试图做的事情：

我在屏幕顶部有一个菜单栏，并且有一个＆＃34; Home＆＃34;链接那里。当您将鼠标悬停在它上面时，还有两个附加链接 - ＆＃34; Writings＆＃34;和＆＃34;音乐＆＃34; - 应分别出现在＆＃34; Home＆＃34;的上方和下方。

不仅仅是出现......我希望它们从隐形变为可见。当你离开这个区域时，它们会消失并消失。

实际上，当你的鼠标悬停在整个列表上时，这两个链接可能会淡入，因为当你的鼠标离开时，我不希望它们消失，并且＃34; home＆＃34;并尝试点击＆＃34;着作＆＃34;或＆＃34;音乐＆＃34;。

无论如何，我所尝试的并没有奏效。现在没有任何反应。两个额外的链接保持不可见，当我将鼠标悬停在上面时没有任何变化。

注意：我在列表周围有边框，因此我可以更轻松地跟踪所有内容（我有点新的）。

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：0)

如果兄弟姐妹在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，这将应用于音乐项目符号点（~是兄弟选择器），但是它不适用于写作，因为该列表项是 BEFORE 实际的主页列表项。

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

我没有100％的解决方案，但您可以在元素hover上的ul上执行此操作

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

答案 2 :(得分：0)

说明 - 100％期望的效果

HTML

  1. 将类从锚标记<a>移至外部列表项<li>标记。

  2. 我将Home列表项移到了顶部，并更改了

    3. 的位置

    CSS

    1. 使用~ CSS选择器选择后续的兄弟姐妹。
    2. 改为margin

      3. 代码

      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>

相关问题
最新问题