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

【问题标题】：how to show select box options on mouse over?如何在鼠标悬停时显示选择框选项？
【发布时间】：2023-03-05 18:42:01
【问题描述】：

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

但我希望使用鼠标悬停而不是单击来实现此功能。

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

更新

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

【问题讨论】：

Sup 伙计，请阅读此内容 - 您尝试做的不是标准的 html 做法：stackoverflow.com/questions/4292061/…

标签： jquery select mouseover

【解决方案1】：

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

【讨论】：

【解决方案2】：

我认为您只能使用您的选择作为 DOM 树的一部分来构建一些带有此“选项”信息的 mouseOver 放置 div，您可以作为选择子项访问这些信息。所以我认为你可能只在 mouseOver 上模拟选择。

【讨论】：

【解决方案3】：

我知道这与您的想法并不完全一致，但它可能是正确的方向。

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>

【讨论】：

也许您可以向我们展示您在更新方面的工作。 “我正在使用 styledSelect jQuery 插件”

【解决方案4】：

另一件事，您引用脚本文件的顺序也起作用，而不是在添加对您创建的 js 文件的引用以覆盖该函数之前让您的 jquery 文件。由于某些奇怪的原因，它可以工作，但不能在 safari 中使用

【讨论】：