Как показать список выбранных опций при наведении?

Я хочу показать список вариантов выбора при наведении курсора, но он не работает:

<div className = "rating-option">
    <select
        id = "rating"
        className = "rating"
        value = {rating}
        onChange = {(e) => setRating(e.target.value)}
    >
        <option value = "">Select Rating</option>
        <option value = "1">1- Bad</option>
        <option value = "2">2- Fair</option>
        <option value = "3">3- Good</option>
        <option value = "4">4- Very good</option>
        <option value = "5">5- Excelent</option>
    </select>
</div>

CSS, примененный к этому коду:

.rating-option {
  position: relative;
  margin: 20px;
  padding: 20px;
  display: flex;
}
.rating-option:hover .rating {
  display: list-item;
  background-color: red;
}
#rating {
  position: absolute;
}

html css reactjs

16.07.2024 03:48

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы не можете вызвать отображение списка параметров при наведении курсора, поскольку он контролируется самим браузером.

Но вы можете добиться аналогичного эффекта, используя собственные раскрывающиеся списки и подход на основе React.

import React, { useState } from 'react';

const CustomSelect = () => {
  const [isHovered, setIsHovered] = useState(false);
  const [selectedValue, setSelectedValue] = useState('');
  
  const options = [
    { value: '', label: 'Select Rating' },
    { value: '1', label: '1- Bad' },
    { value: '2', label: '2- Fair' },
    { value: '3', label: '3- Good' },
    { value: '4', label: '4- Very good' },
    { value: '5', label: '5- Excellent' },
  ];

  const handleMouseEnter = () => setIsHovered(true);
  const handleMouseLeave = () => setIsHovered(false);

  return (
    <div 
      className = "rating-option" 
      onMouseEnter = {handleMouseEnter} 
      onMouseLeave = {handleMouseLeave}
    >
      <div className = "custom-select">
        {selectedValue ? options.find(option => option.value === selectedValue).label : 'Select Rating'}
      </div>
      {isHovered && (
        <ul className = "custom-options">
          {options.map(option => (
            <li 
              key = {option.value} 
              onClick = {() => setSelectedValue(option.value)}
              className = {option.value === selectedValue ? 'selected' : ''}
            >
              {option.label}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default CustomSelect;

Обновите свой CSS-файл

.rating-option {
  position: relative;
  width: 200px;
  margin: 20px;
  padding: 10px;
  border: 1px solid #ccc;
  cursor: pointer;
}

.custom-select {
  padding: 10px;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  text-align: center;
}

.custom-options {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  border: 1px solid #ccc;
  background-color: #fff;
  z-index: 1000;
  list-style: none;
  padding: 0;
  margin: 0;
}

.custom-options li {
  padding: 10px;
  cursor: pointer;
}

.custom-options li:hover, .custom-options li.selected {
  background-color: #f0f0f0;
}

Вы можете использовать ссылку, чтобы сохранить ссылку на select, и вы можете использовать событие onHover, а затем onHover вы можете вручную вызвать событие фокуса для этого элемента выбора. Дайте мне знать, если вы хотите это в коде

— 16.07.2024 16:31

да, пожалуйста, покажите, как это работает?

— 16.07.2024 16:49

На самом деле это решение работает не во всех браузерах. и это также не рекомендуемый подход, поэтому, пожалуйста, придерживайтесь подхода, о котором я рассказал выше. здесь вы можете прочитать об этом больше. stackoverflow.com/questions/249192/…

— 19.07.2024 05:54

Пожалуйста, отметьте мой ответ, если он вам помог

— 19.07.2024 05:55

Спасибо, дорогой Абузаин, ваше решение помогло мне решить мою проблему с наведением.

— 21.07.2024 14:48

Пожалуйста, отметьте мой ответ

— 22.07.2024 03:26

16.07.2024 05:00