单词悬停时弹出

Question

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

1) 当您登陆页面时，弹出窗口已经显示。如果我在“弹出”类上尝试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>

Answer 1

这里不需要 JavaScript，因为 :hover 伪选择器可以在 CSS 中完美运行。当悬停 .choose 元素时，选择带有兄弟选择器 (~) 的 .popup 元素并设置所需的状态。

像这样：

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

但是，我建议更改您的 HTML 结构。将.popup 元素转换为<span> 并将其放在.choose 跨度元素中。这样您就可以相对于.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 div 中，然后进行相应的定位。

Answer 3

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

$(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>

Answer 4

要悬停工作，您必须在 CSS 中要悬停的道具前面添加“:hover”。 更多信息：https://www.w3schools.com/cssref/sel_hover.asp 看看这对你有什么作用，以及相对位置是否需要改变。