在select中悬停在特定选项时显示标签

Question

我有一个选择输入与几个选项我的意图是显示一个弹出标签与一些数据当选项悬停/由用户应用我的代码片段是

<span>
<button className='dashboard-border'>
<select
className='dashboard-button-report'
id="page-size" onChange={changeFilter} value={filters}>
<option key="tWeekBar" value="thisWeek" selected={true}>This Week</option>
<option key="lWeekBar" value="lastWeek">Last Week</option>
<option key="tMonthBar" value="thisMonth" >This Month</option>
<option key="lMonthBar" value="lastMonth" >Last Month</option>
<option key="tYearBar" value="thisYear" >This Year</option>
<option key="lYearBar" value="lastYear" >Last Year</option>
<option key="bwDatesBar" value="betweenDates" onMouseEnter={()=>function(){console.log("hello")}} >Between Dates</option>
</select>
</button>
</span>

for start，当选项Between dates从选择选项中悬停时，我试图获得控制台输出，但没有成功。这种方法有什么问题?

Answer 1

这里的问题是，您试图将onMouseEnter事件添加到option元素，这是HTML不支持的。您可以尝试对select元素使用onMouseEnter事件，并动态检查当前选择的选项。这应该可以使它工作:

<span>
<button className='dashboard-border'>
<select
className='dashboard-button-report'
id="page-size"
onChange={changeFilter}
value={filters}
onMouseEnter={() => {
const selectEl = document.getElementById('page-size');
const selectedOption = selectEl.options[selectEl.selectedIndex];
console.log('hello',selectedOption);
}}
>
<option key="tWeekBar" value="thisWeek" selected={true}>This Week</option>
<option key="lWeekBar" value="lastWeek">Last Week</option>
<option key="tMonthBar" value="thisMonth">This Month</option>
<option key="lMonthBar" value="lastMonth">Last Month</option>
<option key="tYearBar" value="thisYear">This Year</option>
<option key="lYearBar" value="lastYear">Last Year</option>
<option key="bwDatesBar" value="betweenDates">Between Dates</option>
</select>
</button>
</span>

Answer 2

您是否尝试了<select>中的onMouseEnter函数?