在div结束时溢出无法正常工作

Question

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

如果滚动到该框的末尾，您会看到，如果将鼠标悬停在最后一个段落上，并且在第二行扩展的同时，则向下滚动到尽可能远的位置，这些段落就会出现故障，并且溢出不会进一步扩展，我认为由于已经达到溢出的最大值，因此不会进一步扩展，该怎么办？

 
 
 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

将鼠标悬停在文本行上没有问题，但是当您触摸扩展段落内的某些区域时，它会出现故障。

快速修复将添加如下所示的css

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

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;
}

.nodeParagraph:hover + .extraNodeParagraph:hover {
  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>