如何使用 jQuery 在悬停时触发单击选择框？

在本文中，我们将学习如何使用 jQuery 在鼠标悬停时触发选择框或下拉菜单上的单击事件。

为了为选择框创建这样的行为，我们将使用 jQuery attr() 方法。该方法用于设置或返回网页上被选元素的属性和值。请注意，我们将无法在悬停时直接触发点击事件，因此我们使用attr()方法来完成工作。

方法：我们将在选择框的以下 id 或类上调用 hover() 方法。我们将使用 attr() 方法获取选择框的大小，并在相同的方法中将其大小更改为 1，因此当我们将光标从选择框移出时，它会恢复为默认大小。通过使用这种方法，我们将能够在鼠标悬停时显示整个列表，当用户从列表中选择任何值时，它会返回默认视图。

例子：

HTML

    
     
    Trigger click on hover on the select box
    
        body {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
        .main{
            display: flex;
            align-items: center;
            align-items: center;
            justify-content: center;
            margin: 50px;
        }
        .main div{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 10px;
            border-radius: 50%;
            cursor: pointer;
        }
        #select_value{
            outline: none;
            width: 120px;
        }
    



    
        
        Select
        Actor
        Dancer
        Singer
        Musician
        Fighter
    



    $(function(){
        // When the user hovers over the select box,
        // it gets the value of the whole list.
        $('#select_value').hover(function() {
            $(this).attr('size', $('option').length);
        },
  
        // When the user stops hovering over the select box, 
        // it gets back to the normal or default value.
        function() {
            $(this).attr('size', 1);
        });
  
        // When the user clicks on the select box, 
        // it gets the value of the selected item.
  
        $('#select_value').click(function() {
            $(this).attr('size', 1);
        });
    });    

输出：