Question

我有一个下拉选择框，有一些选项。当我们点击下拉菜单时，下拉菜单会展开，并显示所有选项。

但是我想用鼠标加载而不是点击这个功能。

我想在鼠标悬停时显示所有选项。有谁对此有所了解？

已更新

我正在使用styledSelect jQuery插件。现在这个插件将html选择框转换为基于div和li的选择框。 Here is the plugin documentation

Answer 1

我知道这并不是你想到的，但可能是正确的方向。

function toggleSelectBox(selbox) {
    if (selbox.size > 1) { //HIDE:
        selbox.size = 1;
        selbox.style.position = 'static';
    } else { //SHOW:
        selbox.size = selbox.options.length;
        selbox.style.position = 'absolute';
        selbox.style.height = 'auto';
    }
}


<select id="type" name="type" onmouseout="toggleSelectBox(this)" onmouseover="toggleSelectBox(this)">
    <option value="">opt1</option>
    <option value="">opt2</option>
    <option value="">opt3</option>
</select>

Answer 2

您需要使用CSS来完成任务。你不能用经典的html选择框来做。这是您想要的example。

Answer 3

我认为你只能使用你的select作为DOM树的一部分来构建一些mouseOver drop div，这个“选项”信息可以作为select子项访问。所以我认为你只能模拟mouseOver上的select。

Answer 4

另一件事，您引用脚本文件的顺序也起到了作用，而是在添加对您创建的js文件的引用以覆盖该函数之前使用您的jquery文件。它会起作用，但不会因为一些奇怪的原因而出现在野生动物园中

如何在鼠标悬停时显示选择框选项？

4 个答案: