单词悬停时弹出窗口

Question

每当我将鼠标悬停在橙色文本上时，我都想显示一个带有文本的弹出窗口，但我正在为我编写的代码在两种不同的情况下挣扎：

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

2)我希望它们与单词相关，而不是与整个段落相关，但我不知道如何在"choose“类上设置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>

​

Answer 1

这里不需要JavaScript，因为:hover伪选择器将在CSS中完美地工作。在悬停.choose元素时，使用同级选择器(~)选择.popup元素并设置所需的状态。

如下所示：

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

但是，我建议更改您的HTML结构。将.popup元素转换为<span>，并将其放入.choose span元素中。这样，您可以将弹出窗口相对于.choose元素的位置进行定位。既然.popup是.choose的子类，那么您就不必使用兄弟选择器了。

使用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>

​

Answer 2

对于问题1，请使用以下命令：

    .popup_container{display:none;}

    .choose:hover + .popup_container {position:relative;display:auto;}

对于问题2：

您需要声明.choose项的位置，将.popup_container放在.choose目录中，然后相应地定位它。

Answer 3

因此，我稍微更改了代码，并将onmouseover和onmouseout侦听器附加到draw和amplitud。最初，我将popup dispay设置为none，在鼠标悬停时将其设置为空字符串。此外，我对popup类应用了z-index，以便每次弹出窗口都在文本上方

​

$(document).ready(function() {
  // DOM Elements
  const draw = document.getElementById("draw");
  const popupdraw = document.getElementById("popup_daw");
  const amplitud = document.getElementById("amplitud");
  const popupamplitud = document.getElementById("popup_amplitud");

// Event Listeners
  amplitud.onmouseover = function() {
    popupamplitud.style.display = "";
  };
  amplitud.onmouseout = function() {
    popupamplitud.style.display = "none";
  };

  draw.onmouseover = function() {
    popupdraw.style.display = "";
  };
  draw.onmouseout = function() {
    popupdraw.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-top: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;
  left:50%;
  font-size: 16px;
  line-height: 22.7px;
  z-index: 400;
    display:inline-block;
  vertical-align:top;
}

.popup p {
  margin-left: 4%;
  margin-right: 4%;
  padding-top: 20px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="./index.css" />
    <!-- jquery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  </head>
  <body>
    <div class="text">
      <article>
        <div class="popup_container">
          Nuestro objetivo es que la <span class="choose" id="amplitud">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" style="display:none">
            <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" id="draw">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" style="display:none">
            <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>
    <script src="./index.js"></script>
  </body>
</html>

​