Question

在点击之前，应隐藏子span元素;在它显示之后，孩子应该一直离开，屏幕尺寸的80％宽度，相对于祖父母，而不是父母。

这是代码：

<p>Text text text text

<span style="position: relative; display: inline-block; vertical-align: top; background: #dddddd; overflow: hidden;" onclick="this.style.overflow='';" onmouseout="this.style.overflow='hidden';">(activeword)
<span style="position: absolute; background: white; border: 1px solid black;">

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Lorem ipsum, big text here, dolor sit amet, consectetur adipiscing elit.
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Lorem ipsum, second even bigger text here, dolor sit amet, consectetur adipiscing elit.

</span>
</span> 

text text text end of paragraph text.</p>

（注意：不能使用外部CSS;不能使用伪元素，因为它们不能内联）

Answer 1

您必须将position: relative;移至p元素（示例1），或者移至p position: relative;并移动内部{{} 1}}在外span之外（样本2）

附注，我建议您使用外部CSS样式表而不是内联样式

更新了这两个示例，其中包含一个显示/隐藏2：d范围的点击处理程序，作为子项和兄弟

样本1 - 已更新

＆＃13;

span

＆＃13;

样本2 - 已更新

＆＃13;

<p style="position: relative;">Text text text text

  <span style="display: inline-block; vertical-align: top; background: #dddddd; overflow: hidden;" onclick="this.children[this.children.length-1].style.display='block';" onmouseout="this.children[this.children.length-1].style.display='none';">(activeword)
    <span style="position: absolute; background: white; border: 1px solid black; display: none; left: 10%; width: 80%;">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Lorem ipsum, big text here, dolor sit amet, consectetur adipiscing elit.
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Lorem ipsum, second even bigger text here, dolor sit amet, consectetur adipiscing elit.
    </span>
  </span>

  text text text end of paragraph text.</p>

＆＃13;

Answer 2

我接近我需要的东西（但没有完全正常运作）：

<p>Text text text text

<span style="position: absolute; display: inline-block; vertical-align: top; background: #dddddd; overflow: hidden;" onclick="this.style.overflow='';" onmouseout="this.style.overflow='hidden';">(activeword)
<span style="position: absolute; background: white; border: 1px solid black; right: 0; width: 200%; top: 2em;">

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Lorem ipsum, big text here, dolor sit amet, consectetur adipiscing elit.<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Lorem ipsum, second even bigger text here, dolor sit amet, consectetur adipiscing elit.

</span>
</span> 

text text text end of paragraph text.</p>

尽管如此，孩子需要与祖父母相关，它应该是屏幕大小的80％，并且它不应该离屏幕。

你也可以在这里看到它： https://jsbin.com/jubobugonu/1/watch?html,output

@LGSon 以下是“style.opacity”的示例：

  <p>Text text text paragraph start text text text text text text 
    <span class="clickword" style="position:relative; display: inline-block; background: #dddd00; color: blue; text-decoration: underline;" onclick="this.getElementsByClassName('tooltip')[0].style.opacity='1';" onmouseout="this.getElementsByClassName('tooltip')[0].style.opacity='0';" >(activeword)
      <span class="tooltip" style="position:fixed; display: block; left: 10%; right: 10%; background-color:white; color: black; border: 1px solid #777; padding: 5px; border-radius:5px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); -webkit-box-shadow:  0 0 30px rgba(0, 0, 0, 0.5); -moz-box-shadow:  0 0 30px rgba(0, 0, 0, 0.5);  -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -ms-transition: opacity 0.5s; -o-transition: opacity 0.5s; transition: opacity 0.5s;">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Lorem ipsum, big text here, dolor sit amet, consectetur adipiscing elit.<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Lorem ipsum, second even bigger text here, dolor sit amet, consectetur adipiscing elit.
      </span>    
    </span> 
  text text text end of paragraph text text text text text text.</p>

绝对子元素相对于祖父母的位置，而不是父母......和孩子应该保持隐藏直到被点击

2 个答案: