Question

我想显示一个用js隐藏（带有CSS）的下拉列表。因此，当我将鼠标悬停在按钮上时，我使用了onmousehover来显示列表，但是当鼠标离开时，列表仍然存在。我使用onmouseout隐藏列表，但是当鼠标不在按钮上时，列表消失了。基本上，我希望能够将鼠标悬停在按钮上，查看下拉菜单并单击项目，这是不可能的，因为一旦我的鼠标不在按钮上，这些项目就会被隐藏。

这是我的HTML代码：

<div class="dropdownfonts">
    <button id="dropdown" onmouseover="drop()" onmouseout="hide()">Fonts</button>
    <br>
    <button class="fonts">Times New Roman</button><br>
    <button class="fonts">Calibri</button><br>
    <button class="fonts">Arial</button>
</div>

还有我的js：

T = document.getElementsByClassName("fonts")

function hide(){
    for(i = 0; i < T.length; i++)
        T[i].style.display="none";
}

function drop() {
    for( i = 0; i < T.length; i++)
        T[i].style.display="block";
}

谢谢！

Answer 1

您可以封闭该按钮，以在包含的（不可见）中打开下拉菜单和，然后应用与之相同的逻辑。

+-A----------------+
|                  |
| +-B------------+ |
| |              | |
| +--------------+ |
|                  |
| +-C------------+ |
| |              | |
| +--------------+ |
|                  |
| +-D------------+ |
| |              | |
| +--------------+ |
|                  |
+------------------+

A是容器，B是按钮，C和D是项目。

Answer 2

您可以尝试在30上使用100

Answer 3

将鼠标事件应用于封闭范围而不是按钮本身。在悬停时，使其显示属性等于inline-block而不是inline

T=document.getElementsByClassName("fonts")
for(i=0;i<T.length;i++)
T[i].style.display="none";

function hide(){
for(i=0;i<T.length;i++)
T[i].style.display="none";
}
function drop(){

for(i=0;i<T.length;i++)

T[i].style.display="inline-block";
}

<span class="dropdownfonts" onmouseout="hide()" onmouseover="drop()">
<button id="dropdown"  
>Fonts</button>

<br>

<button class="fonts">Times New Roman</button><br>
<button class="fonts">Calibri</button><br>
<button class="fonts">Arial</button>


</span>

<br>

 T=document.getElementsByClassName("fonts")
    for(i=0;i<T.length;i++)
    T[i].style.display="none";

    function hide(){
    for(i=0;i<T.length;i++)
    T[i].style.display="none";
    }
    function drop(){

    for(i=0;i<T.length;i++)

    T[i].style.display="inline-block";
    }

<div class="dropdownfonts" onmouseout="hide()" onmouseover="drop()"> <button id="dropdown"  >Fonts</button> <br> <button class="fonts" value="2" onclick="change(this.innerHTML)">Times New Roman</button><br> <button class="fonts" value="1" onclick="change(this.innerHTML)">Calibri</button><br> <button class="fonts" value="3" onclick="change(this.innerHTML)">Arial</button> </div>

使用onmousehover显示下拉列表，并使用onmouseout隐藏它

3 个答案: