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>

还可以使用许多其他库。

选择悬停时触发引导弹出窗口

1 个答案: