在选择悬停时触发启动弹出窗口

Question

我只是想知道是否有可能在将鼠标悬停在选择选项上时触发弹出窗口。 原因是我想显示有关该特定选项的一些信息。

我已经尝试了以下代码，但无法正常工作。 有什么想法可以解决吗？

<select data-toggle="select" class="form-control select select-default mrs mbm">
        <option value="0">My Profile</option>
        <option value="1" id="popoverOption" class="btn" href="#" data-content="Popup with option trigger" rel="popover" data-placement="bottom" data-original-title="Title">My Friends</option>
        <option value="2">My Profile</option>
        <option value="3">My Friends</option>
 </select>

$('#popoverOption').popover({ trigger: "hover" });

Answer 1

由于select元素的“绘制”部分是由操作系统完成的，因此有许多事情与它们无关（与样式/事件/等有关），因此不幸的是，无法将事件设置为悬停在<option>元素。

您可以做的是使用一些js-lib将<select>元素转换为可以具有所需所有样式/事件的其他html元素：

您可以使用selectmenu例如（这是jquery-ui库的一部分）：

 $(function() { $('#s1').selectmenu({ focus: function(ev, ui) { $('#content').html(ui.item.value + ' was hovered'); } }); }); 

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.12.4.js"></script> <script src="//code.jquery.com/ui/1.12.0/jquery-ui.js"></script> <div id="content">&nbsp;</div> <select name="s1" id="s1"> <option>op1</option> <option>op2</option> <option selected="selected">op3</option> <option>op4</option> </select> 

您还可以使用许多其他库。