在悬停时在容器/页面底部显示隐藏的段落

Question

我的div中的段落在悬停时创建第二行-

我想我发现了溢出可能如何工作的一个小问题-如果您向下滚动到框的底部并悬停在最后一段上，则在展开该段时向下滚动到滚动条的末尾-< / p>

您会发现，如果您现在尝试扩展该段落，它将出现故障并拒绝扩展，我相信是因为溢出已将该段的金额用于该段落。我可以使用什么替代解决方案？

所有CSS都在“ rightbox”（即盒子本身）和“ 第一段是“ nodeParagraph”，第二段是“ extraParagraph”。

谢谢。

 
 
 node = ["systems development highways junior", "Dale", "efefefefe efef", "dadadadada dadadad adadadadadad", "systems biggest development pot ever in the hands of the most junior fishermen", "systems biggest development pot ever in the hands of the most junior fishermen","systems biggest development pot ever in the hands of the most junior fishermen","systems biggest development pot ever in the hands of the most junior fishermen","systems biggest development pot ever in the hands of the most junior fishermen","systems biggest development pot ever in the hands of the most junior fishermen","systems biggest development pot ever in the hands of the most junior fishermen", ]
 
 d3.selectAll('#titleTable').selectAll('td')
      .data(node)
      .enter()
      .append('divname')
      .html(node => {
        if (node && node.length > 35) {
          var before = node.slice(0, node.indexOf(' ', 28));
          var after = node.slice(node.indexOf(' ', 24));
          var beforeReplacementParagraph = node.slice(0, node.indexOf(' ', 24));

          return ` 
           <p class="nodeParagraph"> 
           <span class="hide-on-hover">${before}... </span>
           <span class="show-on-hover">${beforeReplacementParagraph}</span>
         </p>
           <p class="extraNodeParagraph">${after} </p>
         `
            
        }

        return `
         <p class="nodeParagraph">${node} </p>`
      })
      
  

.totalWrapper {
  position: absolute;
  width: 110%;
  height: 200%;
  z-index: 1;
}

.wrapper {
  width: 370px;
  height: auto;
  position: sticky;
  left: 152px;
  top: 200;
  z-index: 3;
}

.divname {
  position: relative;
  z-index: 1000;
}

.cropcircle {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background: #eee no-repeat center;
  background-size: cover;
}

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

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

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

.nodeParagraph .show-on-hover{
  display: none;
}
.nodeParagraph:hover .hide-on-hover{
  display: none;
}

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

.headerDiv {
  position: relative;
  z-index: 1001;
  height: 20px;
  width: 295px;
  background: #fff;
  clear: both;
  margin-top: 90px;
  left: 18px;
}

.headerText {
  position: relative;
  color: #1A2F59;
  left: 13px;
  top: 5.5px;
  font-size: 16px;
}

.headerTextIndividual {
  position: relative;
  color: #1A2F59;
  left: 13px;
  top: 5.5px;
  font-size: 16px;
}

.rightBox {
  font-family: $font-family-base;
  z-index: -1;
  position: absolute;
  width: 295px;
  float: left;
  background:#fff;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.05);
  height: auto;
  -webkit-user-select: none; /* Chrome/Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none;
  padding-bottom: 20px;
  // overflow: hidden;
  left: 18px;
  max-height: 300px;
  overflow-y: auto;
  border-style: dotted;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="totalWrapper" class="totalWrapper" (click)="hideBox()">
       <div class="wrapper">
           <div id="headerDiv"class="headerDiv">
            <h1 id="headerText"class="headerText">{{ 'More Engagements' | translate }} </h1>
          </div>
          <div id="rightBox" class = "rightBox">
            <table >
              <tr id="titleTable" class="titleTable">
                <td><div id="divname" class = "divname"></div></td>
              </tr>
            </table>
         </div>
       </div>
       </div>

我的预期结果是，即使我到达底部，该框仍会扩展以容纳第二段，这意味着没有闪烁。

Answer 1

您的问题是，只有将鼠标悬停在第一段时，您才显示另一段。

滚动到底部时，浏览器“记住”滚动位置，并在显示新内容（以前是隐藏的段落）时跳到该位置。

您想要做的是将隐藏的部分嵌套在应悬停的部分中，以便在动态部分也悬停时保持打开状态。

node = ["systems development highways junior", "Dale", "efefefefe efef", "dadadadada dadadad adadadadadad", "systems biggest development pot ever in the hands of the most junior fishermen", "systems biggest development pot ever in the hands of the most junior fishermen","systems biggest development pot ever in the hands of the most junior fishermen","systems biggest development pot ever in the hands of the most junior fishermen","systems biggest development pot ever in the hands of the most junior fishermen","systems biggest development pot ever in the hands of the most junior fishermen","systems biggest development pot ever in the hands of the most junior fishermen", ]
 
 d3.selectAll('#titleTable').selectAll('td')
      .data(node)
      .enter()
      .append('divname')
      .html(node => {
        if (node && node.length > 35) {
          var before = node.slice(0, node.indexOf(' ', 28));
          var after = node.slice(node.indexOf(' ', 24));
          var beforeReplacementParagraph = node.slice(0, node.indexOf(' ', 24));

          return ` 
           <p class="nodeParagraph"> 
             <span class="hide-on-hover">${before}... </span>
             <span class="show-on-hover">${beforeReplacementParagraph}</span>
             <span class="extraNodeParagraph">${after} </span>
           </p>
         `
            
        }

        return `
         <p class="nodeParagraph">${node} </p>`
      })

.totalWrapper {
  position: absolute;
  width: 110%;
  height: 200%;
  z-index: 1;
}

.wrapper {
  width: 370px;
  height: auto;
  position: sticky;
  left: 152px;
  top: 200;
  z-index: 3;
}

.divname {
  position: relative;
  z-index: 1000;
}

.cropcircle {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background: #eee no-repeat center;
  background-size: cover;
}

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

.nodeParagraph:hover .extraNodeParagraph {
  display: block;
}

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

.nodeParagraph .show-on-hover{
  display: none;
}
.nodeParagraph:hover .hide-on-hover{
  display: none;
}

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

.headerDiv {
  position: relative;
  z-index: 1001;
  height: 20px;
  width: 295px;
  background: #fff;
  clear: both;
  margin-top: 90px;
  left: 18px;
}

.headerText {
  position: relative;
  color: #1A2F59;
  left: 13px;
  top: 5.5px;
  font-size: 16px;
}

.headerTextIndividual {
  position: relative;
  color: #1A2F59;
  left: 13px;
  top: 5.5px;
  font-size: 16px;
}

.rightBox {
  font-family: $font-family-base;
  z-index: -1;
  position: absolute;
  width: 295px;
  float: left;
  background:#fff;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.05);
  height: auto;
  -webkit-user-select: none; /* Chrome/Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none;
  padding-bottom: 20px;
  // overflow: hidden;
  left: 18px;
  max-height: 300px;
  overflow-y: auto;
  border-style: dotted;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="totalWrapper" class="totalWrapper" (click)="hideBox()">
       <div class="wrapper">
           <div id="headerDiv"class="headerDiv">
            <h1 id="headerText"class="headerText">{{ 'More Engagements' | translate }} </h1>
          </div>
          <div id="rightBox" class = "rightBox">
            <table >
              <tr id="titleTable" class="titleTable">
                <td><div id="divname" class = "divname"></div></td>
              </tr>
            </table>
         </div>
       </div>
       </div>