0

我有这个问题。5 列弹性盒。每个框都包含标题 txt 和补充 txt，但仅在悬停在该特定列上时。当 unhover 恢复正常时。听起来很简单，我是在 codepen 中完成的（这里是粗略的模型。我在 elementor 中构建，这可能是导致问题的原因。当我将鼠标悬停在 1 列时。txt 出现在所有列中。参考这里的页面 我曾经得到了很大的帮助来自你们，即使它被证明是一个复制问题。我花了 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>
4

1 回答 1

0

首先简化您的代码，这里有很多nesting, 标记与提供的链接不同。

您可以使用选择器在选定的父 div上nth-child进行补充淡入，texthover

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

于 2017-11-26T11:18:21.840 回答