小贝子编程

当鼠标悬停在另一个链接上时，使用CSS使两个链接淡入



这可能是CSS悬停过渡的极限(这当然是我新手理解的极限)，但这是我想做的:

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

不只是出现，虽然…我想让它们从隐形变成可见。当你离开这个区域时，它们就会消失。

实际上，当你的鼠标悬停在整个列表上时，这两个链接可能会消失，因为我不希望它们在你的鼠标离开"home"并试图点击"writings"或"music"时消失。

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

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

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，这将应用于音乐项目符号(~是兄弟选择器)，但它不会为写作工作，因为该列表项是在实际的主列表项。

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>

我没有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>

说明- 100%预期效果

HTML

  1. 将类从锚标签<a>移动到外部列表项目<li>标签

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

    的位置
CSS

  1. 使用~ CSS选择器来选择后续的兄弟姐妹。
  2. 更改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>

相关内容

  • 没有找到相关文章

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium