En este artículo, vamos a aprender cómo podemos activar un evento de clic en el cuadro de selección o en el menú desplegable mientras pasamos el mouse usando jQuery.
Para crear dicho comportamiento para un cuadro de selección, usaremos el método jQuery attr() . Este método se utiliza para establecer o devolver los atributos y valores de los elementos seleccionados en la página web. Tenga en cuenta que no podremos activar directamente el evento de clic al pasar el mouse , por lo que estamos usando el método attr() para realizar el trabajo.
Enfoque: llamaremos al método hover() en la siguiente identificación o clase del cuadro de selección. Usaremos el método attr() para obtener el tamaño del cuadro de selección y, con el mismo método, cambiaremos su tamaño a 1, de modo que cuando movemos el cursor fuera del cuadro de selección, vuelve al tamaño predeterminado. Al usar este enfoque, podremos mostrar la lista completa al pasar el mouse y cuando el usuario seleccione cualquier valor de la lista, volverá a la vista predeterminada.
Ejemplo:
HTML
<!DOCTYPE html>
<head>
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js"
integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin=
"anonymous">
</script>
<title>Trigger click on hover on the select box</title>
<style>
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;
}
</style>
</head>
<body>
<div class="main">
<select id="select_value">
<!-- There are five items on the list -->
<option value="">Select</option>
<option value="Actor">Actor</option>
<option value="Dancer">Dancer</option>
<option value="Singer">Singer</option>
<option value="Musician">Musician</option>
<option value="Fighter">Fighter</option>
</select>
</div>
</body>
<script>
$(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);
});
});
</script>
</html>
Producción:
