📌  相关文章
📜  jQWidgets jqxComboBox enableHover 属性(1)

📅  最后修改于: 2023-12-03 15:16:52.706000             🧑  作者: Mango

jQWidgets jqxComboBox enableHover 属性介绍

简介

jQWidgets jqxComboBox 是一个跨浏览器的用于创建下拉框组件的jQuery插件。enableHover 是该插件提供的一个属性，用于控制当鼠标悬停在下拉框选项上时，是否启用 hover 效果。

语法
$(selector).jqxComboBox({ 
    enableHover: true|false 
});
参数

enableHover 属性接受一个布尔类型的值，true 表示启用 hover 效果，false 表示禁用 hover 效果。默认值为 true。

用法

在下面的例子中，我们创建了一个 jqxComboBox，并将 enableHover 设置为 true，这样当鼠标悬停在下拉框选项上时，会出现 hover 效果。

<html>
<head>
    <title>jQWidgets jqxComboBox enableHover 属性介绍</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/9.1.2/jqxcore.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/9.1.2/jqxbuttons.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/9.1.2/jqxscrollbar.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/9.1.2/jqxlistbox.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/9.1.2/jqxcombobox.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/9.1.2/jqx.base.css" />
</head>
<body>
    <div id="jqxComboBox"></div>
    <script>
        $(document).ready(function () {
            var source = [
                "Option 1", "Option 2", "Option 3", "Option 4", "Option 5"
            ];
            $("#jqxComboBox").jqxComboBox({ source: source, enableHover: true });
        });
    </script>
</body>
</html>
效果

当鼠标悬停在下拉框选项上时，选项会出现 hover 效果。

注意事项

enableHover 属性只在下拉框选择项被悬停时起作用，如果选项被禁用，则任何 hover 效果都不会发生。默认情况下，enableHover 属性是启用的，如果需要禁用 hover 效果，只需在初始化时将 enableHover 属性设置为 false 即可。