Word 悬停时弹出窗口

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>

Answer 1

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

像这样：

.choose:hover ~ .popup { 

  ...

}

不过，我建议更改您的 HTML 结构。将.popupelement 转换为 a<span>并将其放置在.choosespan 元素内。这样您就可以相对于.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

所以我稍微改变了代码，并将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>

  <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 3

对于问题 1 使用这个：

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

对于问题2：

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

Answer 4

要悬停工作，您必须在 css 中要悬停的 prop 前面添加“:hover”。