每當(dāng)我將鼠標(biāo)懸停在橙色文本上時，我想顯示一個帶有文本的彈出窗口，但我在使用我編寫的代碼時遇到兩種不同的情況：1) 當(dāng)您登陸頁面時，彈出窗口已經(jīng)顯示。如果我嘗試display: none“彈出”課程，它們將永遠(yuǎn)不會顯示。2）我希望它們與單詞相關(guān)，而不是與整個段落相關(guān)，但我不知道如何建立position: relative“選擇”類，因為它是一個跨度標(biāo)簽，而且似乎不允許這樣做。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>
4 回答
繁華開滿天機(jī)
TA貢獻(xiàn)1816條經(jīng)驗 獲得超4個贊
這里不需要 JavaScript，因為:hover偽選擇器在 CSS 中可以完美工作。將鼠標(biāo)懸停在元素上時，使用同級選擇器 ( ).choose選擇該元素并設(shè)置所需的狀態(tài)。.popup~
像這樣：
.choose:hover ~ .popup {
...
}
不過，我建議更改您的 HTML 結(jié)構(gòu)。將.popupelement 轉(zhuǎn)換為 a<span>并將其放置在.choosespan 元素內(nèi)。這樣您就可以相對于.choose元素的位置定位彈出窗口?，F(xiàn)在您不必使用作為 的.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>
米脂
TA貢獻(xiàn)1836條經(jīng)驗 獲得超3個贊
所以我稍微改變了代碼，并將onmouseover和onmouseout偵聽器附加到draw和amplitud。最初我將彈出窗口設(shè)置dispay為none并在鼠標(biāo)懸停時將其設(shè)置為空字符串。我還申請了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>
千萬里不及你
TA貢獻(xiàn)1784條經(jīng)驗 獲得超9個贊
對于問題 1 使用這個：
.popup_container{display:none;}
.choose:hover + .popup_container {position:relative;display:auto;}對于問題2：
您需要聲明 .choose 項的位置，將 .popup_container 放入 .choose div 中，然后相應(yīng)地定位它。
- 4 回答
- 0 關(guān)注
- 159 瀏覽
添加回答
舉報
0/150
提交
取消