Word 悬停时弹出窗口
每当我将鼠标悬停在橙色文本上时，我想显示一个带有文本的弹出窗口，但我在使用我编写的代码时遇到两种不同的情况：
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>
喵喵时光机浏览 107回答 4
4回答
-
繁华开满天机
这里不需要 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> -
米脂
所以我稍微改变了代码，并将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> -
千万里不及你
对于问题 1 使用这个： .popup_container{display:none;} .choose:hover + .popup_container {position:relative;display:auto;}对于问题2：您需要声明 .choose 项的位置，将 .popup_container 放入 .choose div 中，然后相应地定位它。 -
慕盖茨4494581
要悬停工作，您必须在 css 中要悬停的 prop 前面添加“:hover”。
随时随地看视频慕课网APP
相关分类
Html5