javascript - 在悬停时隐藏我的 div 但显示另一个 - HTML/CSS

Question

我有三段

当我将鼠标悬停在已经显示的那个上时，我想在它下面显示第二段并用第三段替换第一段？

使用我的css，因为当我将鼠标悬停在第一段上时它会显示它和第二段，当我尝试同时说“阻止”第一段并显示第三段时，用户界面会变得疯狂，因为它同时试图阻止和显示，我能做些什么？

.nodeParagraph {
  font-size: 14px;
  letter-spacing: 0.03px;
  cursor: pointer;
  font-family: $font-family-base;
  position: relative;
  font-weight: 300;
  z-index: 10000000;
  left: 20px;
  top: 20px;
  width: 265px;
}

.nodeParagraph:hover+.nodeParagraph1 {
  display: block;
}

.nodeParagraph1 {
  font-size: 14px;
  letter-spacing: 0.03px;
  cursor: pointer;
  font-family: $font-family-base;
  position: relative;
  font-weight: 300;
  z-index: 10000000;
  left: 47.5px;
  top: 10px;
  width: 265px;
  display: none;
}

.nodeParagraph2 {
  font-size: 14px;
  letter-spacing: 0.03px;
  cursor: pointer;
  font-family: $font-family-base;
  position: relative;
  font-weight: 300;
  z-index: 10000000;
  left: 20px;
  top: 20px;
  width: 265px;
}

.nodeParagraph:hover {
  overflow: visible;
  white-space: normal;
  width: auto;
}

<p class="nodeParagraph"> I am the greatest in the worl... </p>
<p class="nodeParagraph1"> world </p>
<p class="nodeParagraph2"> I am the greatest in the </p>

预期结果：

I am the greatest in the 
world

标签： javascripthtmlcss

Answer 1

检查此代码段，它可能会对您有所帮助。

.nodeParagraph {
  font-size: 14px;
  letter-spacing: 0.03px;
  cursor: pointer;
  font-family: $font-family-base;
  position: relative;
  font-weight: 300;
  z-index: 10000000;
  left: 20px;
  top: 20px;
  width: 265px;
}

.nodeParagraph:hover + .nodeParagraph1 {
  display: block;
}

.nodeParagraph1 {
  font-size: 14px;
  letter-spacing: 0.03px;
  cursor: pointer;
  font-family: $font-family-base;
  position: relative;
  font-weight: 300;
  z-index: 10000000;
  left: 47.5px;
  top: 10px;
  width: 265px;
  display: none;
}

.nodeParagraph2 {
  font-size: 14px;
  letter-spacing: 0.03px;
  cursor: pointer;
  font-family: $font-family-base;
  position: relative;
  font-weight: 300;
  z-index: 10000000;
  left: 20px;
  top: 20px;
  width: 265px;
}
.nodeParagraph .show-on-hover{
  display: none;
}
.nodeParagraph:hover .hide-on-hover{
  display: none;
}

.nodeParagraph:hover .show-on-hover{
  display: block;
}

<p class="nodeParagraph"> 
  <span class="hide-on-hover">I am the greatest in the worl...</span>
  <span class="show-on-hover">I am the greatest in the</span>
</p>
  <p class="nodeParagraph1"> world </p>