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

Question

The paragraphs in my div create a second line when hovering -

If you scroll to the end of the box you can see that if you hover over the last paragraph and while its second line is extended that if you then scroll down as far as you can go, the paragraphs will then glitch and the overflow will not extend any further, I think because the max of the overflow has been reached it won't extend any further, what can I do?

 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> 

My expected result is that even when i have reached the bottom, the box will still expand to allow for the second paragraph, meaning there is no flicker.

Answer 1

Hovering on the line of text has no issues but when you mouse touches some areas inside the extended paragraph makes it glitch.

Fast fix would be adding the css like below

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