1

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

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>

4

4 回答 4

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>

于 2020-03-13T19:23:02.980 回答
0

对于问题 1 使用这个：

    .popup_container{display:none;}

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

对于问题 2：

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

于 2020-03-13T19:20:23.293 回答
0

因此，我稍微更改了代码，并将onmouseoverandonmouseout侦听器附加到drawand 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>

于 2020-03-13T19:46:10.737 回答
-1

要悬停工作，您必须在要在 css 中悬停的道具前面添加“：悬停”。更多信息：https ://www.w3schools.com/cssref/sel_hover.asp 看看它是如何为你工作的，以及相对位置是否需要任何改变。

于 2020-03-13T19:06:03.110 回答