Flexbox 悬停使子菜单 txt 仅出现在悬停列中
Flexbox hover to make submenu txt appear only in hovered column
我有这个问题。 5 列 flexbox。每个框包含 header txt 和补充 txt,但 仅 悬停在该特定列上。当 unhover 恢复正常时。听起来很简单,我在 codepen 中做到了(粗略的模型 here. I am building in elementor, maybe thats causing the problem.When I hover 1 colunm supp. txt appears in all columns. Ref to page here
我曾经从你们那里得到了很大的帮助,即使它被证明是复制问题。我花了 8 个小时连续研究这一次不是这种情况.. 如果是我道歉。
提前致谢。编码来这里:
/* reset browser defaults */
* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100vw;height:100vh}
.container {
display: flex;
height: 100vh; /* mandatory (100% of the viewport height) */
background: #000;
opacity: 0.6;
}
.container div{
flex: 1;
text-align: center;
transition: .3s;
max-width: 20%;
padding: 8em 0;
background: #000;
opacity: 0.99;
}
.container div:hover {
transition: .5s;
max-width: 40%;
flex-grow: 2;
height: 100vh;
cursor: pointer;
background:#000;
opacity: 0.7;
}
div:hover p > span p {
color: #bf9456;
}
div :hover a > span {
color: #bf9456;
}
和 HTML:
<div class="container">
<div>
<p style="color: white;">OM OS</p>
<p><br />
<a style="color: black;"><br />
<span class="colo">VORES IDE</span></a></p>
</div>
<div>
<p style="color: white;">2</p>
<br />
<br />
<a style="color: black;"><span class="mogens">mogens</span></a></div>
<div><span style="color: #ff9900;">3</span></div>
<div><span style="color: #ff9900;">4</span></div>
<div><span style="color: #ff9900;">5</span></div>
</div>
首先简化您的代码,nesting
的代码太多了,这里的标记与提供的链接上的不同。
您可以使用 nth-child
选择器对 hover
选定的父项 div、
进行补充 text
淡入
.container > div:nth-child(1):hover p > span {
color: #bf9456;
}
.container > div:nth-child(2):hover p > span {
color: #bf9456;
}
.container > div:nth-child(3):hover p > span {
color: #bf9456;
}
.container {
display: flex;
height: 100vh;
background: #000;
opacity: 0.6;
}
.container div {
color: #fff;
flex: 1;
text-align: center;
transition: .3s;
max-width: 20%;
padding: 8em 0;
background: #000;
opacity: 0.99;
}
.container div:hover {
transition: .5s;
max-width: 40%;
flex-grow: 2;
cursor: pointer;
background: #000;
opacity: 0.2;
color: #fff;
}
.a {
flex: 1;
color: #000;
}
.container > div:nth-child(1):hover p > span {
color: #bf9456;
}
.container > div:nth-child(2):hover p > span {
color: #bf9456;
}
.container > div:nth-child(3):hover p > span {
color: #bf9456;
}
<div class="container">
<div>
Make me over!
<p style="color:black">
<span class="colo">View Portfolio</span>
</p>
</div>
<div>
View Portfolio
<p style="color:black">
<span class="colo">Why would you say that?</span>
</p>
</div>
<div>
Help me!
<p style="color:black">
<span class="colo">Again..? Why would you say that?</span>
</p>
</div>
</div>
我有这个问题。 5 列 flexbox。每个框包含 header txt 和补充 txt,但 仅 悬停在该特定列上。当 unhover 恢复正常时。听起来很简单,我在 codepen 中做到了(粗略的模型 here. I am building in elementor, maybe thats causing the problem.When I hover 1 colunm supp. txt appears in all columns. Ref to page here 我曾经从你们那里得到了很大的帮助,即使它被证明是复制问题。我花了 8 个小时连续研究这一次不是这种情况.. 如果是我道歉。 提前致谢。编码来这里:
/* reset browser defaults */
* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100vw;height:100vh}
.container {
display: flex;
height: 100vh; /* mandatory (100% of the viewport height) */
background: #000;
opacity: 0.6;
}
.container div{
flex: 1;
text-align: center;
transition: .3s;
max-width: 20%;
padding: 8em 0;
background: #000;
opacity: 0.99;
}
.container div:hover {
transition: .5s;
max-width: 40%;
flex-grow: 2;
height: 100vh;
cursor: pointer;
background:#000;
opacity: 0.7;
}
div:hover p > span p {
color: #bf9456;
}
div :hover a > span {
color: #bf9456;
}
和 HTML:
<div class="container">
<div>
<p style="color: white;">OM OS</p>
<p><br />
<a style="color: black;"><br />
<span class="colo">VORES IDE</span></a></p>
</div>
<div>
<p style="color: white;">2</p>
<br />
<br />
<a style="color: black;"><span class="mogens">mogens</span></a></div>
<div><span style="color: #ff9900;">3</span></div>
<div><span style="color: #ff9900;">4</span></div>
<div><span style="color: #ff9900;">5</span></div>
</div>
首先简化您的代码,nesting
的代码太多了,这里的标记与提供的链接上的不同。
您可以使用 nth-child
选择器对 hover
选定的父项 div、
text
淡入
.container > div:nth-child(1):hover p > span {
color: #bf9456;
}
.container > div:nth-child(2):hover p > span {
color: #bf9456;
}
.container > div:nth-child(3):hover p > span {
color: #bf9456;
}
.container {
display: flex;
height: 100vh;
background: #000;
opacity: 0.6;
}
.container div {
color: #fff;
flex: 1;
text-align: center;
transition: .3s;
max-width: 20%;
padding: 8em 0;
background: #000;
opacity: 0.99;
}
.container div:hover {
transition: .5s;
max-width: 40%;
flex-grow: 2;
cursor: pointer;
background: #000;
opacity: 0.2;
color: #fff;
}
.a {
flex: 1;
color: #000;
}
.container > div:nth-child(1):hover p > span {
color: #bf9456;
}
.container > div:nth-child(2):hover p > span {
color: #bf9456;
}
.container > div:nth-child(3):hover p > span {
color: #bf9456;
}
<div class="container">
<div>
Make me over!
<p style="color:black">
<span class="colo">View Portfolio</span>
</p>
</div>
<div>
View Portfolio
<p style="color:black">
<span class="colo">Why would you say that?</span>
</p>
</div>
<div>
Help me!
<p style="color:black">
<span class="colo">Again..? Why would you say that?</span>
</p>
</div>
</div>