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