javascript - Word 悬停时弹出窗口

标签 javascript html css hover display

每当我将鼠标悬停在橙色文本上时,我都想显示一个带有文本的弹出窗口,但我在编写代码时遇到了两种不同的情况:

1) 当您登陆页面时,弹出窗口已经显示。如果我在“popup”类上尝试 display: none,它们将永远不会显示。

2)我希望它们与单词相关,而不是与整个段落相关,但我不知道如何在“选择”类上建立 position:relative 因为它是一个跨度标签并且似乎不允许这样做。

function showPopupAmplitud() {
  const popup = document.getElementById('popup_amplitud');
  popup.style.display = "";
}

function hidePopupAmplitud() {
  const popup = document.getElementById('popup_amplitud');
  popup.style.display = "none";
}

function showPopupDAW() {
  const popup = document.getElementById('popup_daw');
  popup.style.display = "";
}

function hidePopupDAW() {
  const popup = document.getElementById('popup_daw');
  popup.style.display = "none";
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.text {
  margin-left: 20%;
  margin-right: 42%;
  text-align: justify;
}

.popup_container {
  position: relative;
}

.choose {
  color: #FFAC3E;
  font-weight: bold;
}

.popup {
  padding: 0px 15px 25px 15px;
  background-color: white;
  box-shadow: 1.5px 1.5px 25px rgba(0, 0, 0, 0.3);
  color: #6A6A6A;
  position: absolute;
  width: 50%;
  top: 30px;
  font-size: 16px;
  line-height: 22.7px;
}

.popup p {
  margin-left: 4%;
  margin-right: 4%;
  padding-top: 20px;
}
<div class="text">
  <article>
    <div class="popup_container">
      Nuestro objetivo es que la <span class="choose" onmouseover="showPopupAmplitud()" onmouseout="hidePopupAmplitud()">amplitud</span> de la señal proporcionada por el sintetizador disminuya algunos decibeles cada vez que suene el redoblante. Lo que
      hacemos es asignar un compresor al canal del sintetizador, y mediante el routeo entre ambos canales, activar la opción de Sidechain que tal compresor nos proporciona (no todos los compresores poseen la alternativa de ser utilizados como Sidechain).</br>
      </br>
      <div class="popup" id="popup_amplitud">
        <p>La amplitud de un movimiento oscilatorio, ondulatorio o señal electromagnética es una medida de la variación máxima del desplazamiento u otra magnitud física que varía periódica o cuasiperiódicamente en el tiempo. Es la distancia entre el punto
          más alejado de una onda y el punto de equilibrio o medio.</p>
      </div>
    </div>
    <div class="popup_container">
      En la seccion Mixer del <span class="choose" onmouseover="showPopupDAW()" onmouseout="hidePopupDAW()">DAW</span> a utilizar, se deberá routear el canal que posee asignado el Trigger al canal de la señal a afectar (en el caso de ser FL Studio como
      se muestra en la imagen, se hace click derecho en la flecha inferior y a continuacion “Sidechain to this track”, lo cual generará un enlace entre ambos canales).</br>
      </br>
      <div class="popup" id="popup_daw">
        <p>Una estación de trabajo de audio digital (EAD) o DAW por sus siglas en inglés (Digital Audio Workstation) es un sistema electrónico dedicado a la grabación y edición de audio digital por medio de un software de edición de audio.</p>
      </div>
    </div>
  </article>
</div>

最佳答案

这里不需要 JavaScript,因为 :hover伪选择器在 CSS 中可以完美工作。当鼠标悬停在 .choose 上时元素选择.popup元素与同级选择器 ( ~ ) 并设置所需的状态。

像这样:

.choose:hover ~ .popup { 
  ...
}

但是,我建议更改您的 HTML 结构。转.popup元素进入 <span>并将其放入 .choose 内跨度元素。这样您就可以将弹出窗口相对于 .choose 的位置定位。元素。现在您不必使用同级选择器 .popup.choose的 child .

使用 left 来定位弹出窗口和transform属性将它们放置在已悬停的单词的正下方。

请参阅下面的示例。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.text {
  margin-left: 20%;
  margin-right: 42%;
  text-align: justify;
}

.popup_container {
  position: relative;
}

.choose {
  position: relative;
  color: #FFAC3E;
  font-weight: bold;
}

.popup {
  display: none;
  padding: 15px 15px 25px 15px;
  background-color: white;
  box-shadow: 1.5px 1.5px 25px rgba(0, 0, 0, 0.3);
  background-color: #ffffff;
  color: #6A6A6A;
  position: absolute;
  width: fit-content;
  left: 50%;
  top: 30px;
  font-size: 16px;
  font-weight: normal;
  line-height: 22.7px;
  z-index: 1;
  transform: translate(-50%, 0);
}

.choose:hover .popup,
.popup:hover {
  display: block;
}

.popup p {
  margin-left: 4%;
  margin-right: 4%;
  padding-top: 20px;
}
<div class="text">
  <article>
    <div class="popup_container">
      <p>
      Nuestro objetivo es que la <span class="choose">amplitud
          <span class="popup" id="popup_amplitud">
            La amplitud de un movimiento oscilatorio, ondulatorio o señal electromagnética es una medida de la variación máxima del desplazamiento u otra magnitud física que varía periódica o cuasiperiódicamente en el tiempo. Es la distancia entre el punto
          más alejado de una onda y el punto de equilibrio o medio.
          </span>
        </span> de la señal proporcionada por el sintetizador disminuya algunos decibeles cada vez que suene el redoblante. Lo que hacemos es asignar un compresor al canal del sintetizador, y mediante
      el routeo entre ambos canales, activar la opción de Sidechain que tal compresor nos proporciona (no todos los compresores poseen la alternativa de ser utilizados como Sidechain).</p>
    </div>
    <div class="popup_container">
      <p>
      En la seccion Mixer del <span class="choose">DAW<span class="popup" id="popup_daw">
        Una estación de trabajo de audio digital (EAD) o DAW por sus siglas en inglés (Digital Audio Workstation) es un sistema electrónico dedicado a la grabación y edición de audio digital por medio de un software de edición de audio.
      </span></span> a utilizar, se deberá routear el canal que posee asignado el Trigger al canal de la señal a afectar (en el caso de ser FL Studio como se muestra en la imagen, se hace click derecho en la flecha
      inferior y a continuacion “Sidechain to this track”, lo cual generará un enlace entre ambos canales).
      </p>
    </div>
  </article>
</div>

关于javascript - Word 悬停时弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60675813/

相关文章:

css - 使用 Bootstrap 渲染开放的无谷歌网络字体?

javascript - 无法将表单数据提取到 mongoDB

javascript - 错误 : Cannot read property of undefiended

javascript - 使用溢出 :scoll,SVG 无法在 Div Wrapper 中滚动

html - vCard 微格式属性 'country-name' 是否应使用网站的语言?

javascript - 实现一个函数输出到另一个函数的逻辑

css - float 和列表样式位置 : inside, 在最新的 chrome 中不起作用?

css - 静态元素的定位

javascript - d3.js v4 错误 jquery 冲突?

jquery - 我想使用 jquery 操作 iframe 中的 html