How to Make HTML Select Box Options Appear on Hover?-CSS Tutorial-php.cn

Table of Contents

HTML Markup:

CSS Styles:

JavaScript Event Handling:

Home

Web Front-end

CSS Tutorial

How to Make HTML Select Box Options Appear on Hover?

Barbara Streisand

Oct 31, 2024 am 12:26 AM

How to Make HTML Select Box Options Appear on Hover?

How to Display HTML Select Box Options on Hover

The challenge you presented involves creating a select box where the options are hidden until the user hovers over it. Here's a detailed solution:

Implementation:

The code provided utilizes jQuery's hover() event to toggle the visibility of the list elements. The unselected CSS class is used to style list items that are not currently displayed.

HTML Markup:

<code class="html"><select name="size">
  <option value="small">Small</option>
  <option value="medium">Medium</option>
  <option value="large">Large</option>
</select></code>

Copy after login

CSS Styles:

<code class="css">select {
  opacity: 0.5;
}
ul {
  width: 8em;
  line-height: 2em;
}
li {
  cursor: pointer;
  display: list-item;
  width: 100%;
  height: 2em;
  border: 1px solid #ccc;
  border-top-width: 0;
  text-indent: 1em;
  background-color: #f90;
}
li:first-child {
  border-top-width: 1px;
}
li.unselected {
  display: none;
  background-color: #fff;
}
ul#selectUl:hover li.unselected {
  background-color: #fff;
}
ul#selectUl:hover li,
ul#selectUl:hover li.unselected {
  display: list-item;
}
ul#selectUl:hover li {
  background-color: #fc0;
}
ul#selectUl li:hover,
ul#selectUl li.unselected:hover {
  background-color: #f90;
}</code>

Copy after login

JavaScript Event Handling:

<code class="js">$('#selectUl li:not(":first")').addClass('unselected');

$('#selectUl').hover(
  function () {
    $(this).find('li').click(function () {
      $('.unselected').removeClass('unselected');
      $(this).siblings('li').addClass('unselected');
      var index = $(this).index();
      $('select option:selected').removeAttr('selected');
      $('select[name=size]')
        .find('option:eq(' + index + ')')
        .attr('selected', true);
    });
  },
  function () {}
);</code>

Copy after login

How It Works:

Initially, all option elements in the ul are hidden by adding the unselected class.
When the user hovers over the ul, the hover() event is triggered, causing all list items except the first one (which is the selected option display) to become visible.
Clicking on any list item toggles the unselected class, hiding all other options and revealing the clicked option as selected.
The index() method is used to determine the index of the clicked option, which is then used to update the selected option in the