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

Question

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

我想我发现溢出的潜在工作方式存在一个小故障 - 如果您向下滚动到我的框底部并将鼠标悬停在最后一段上，然后在该段落展开时向下滚动到滚动条的末尾 -

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

所有 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>