如何将onClick更改为onHover功能？ [重复]

Question

这个问题已经在这里有了答案：

• 使Bootstrap Popover在悬停时显示/消失，而不是单击 5回答

<a href="https://jsfiddle.net/krishna2909/amxLak5d/">Clcik here</a>

在上面的链接中，我保留了要测试的代码。 如何将点击功能更改为悬停功能？

Answer 1

在这里您可以找到解决方案https://jsfiddle.net/amxLak5d/2/

 $(function(){ $('[rel="popover"]').popover({ container: 'body', html: true, content: function () { var clone = $($(this).data('popover-content')).clone(true).removeClass('hide'); return clone; }, trigger: "hover" }).hover(function(e) { e.preventDefault(); }); }); 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!--How to change Onclick Function to On Hover Function--> <nav class="navbar navbar-toggleable-xl navbar-light back_trans100"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#"><img src="images/logo.png" class="img-responsible"></a> </div> <ul class="nav navbar-nav navbar-right"> <li class="active"> <a href="#" rel="popover" data-placement="bottom" data-popover-content="#myPopover">My Popover</a> <div id="myPopover" class="hide"> This is a popover list: <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> </div> </li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </div> </nav> 

只需添加trigger: "hover"属性。

参考文档： https : //www.w3schools.com/bootstrap/bootstrap_ref_js_popover.asp

Answer 2

更改带有弹出框的元素，以包含具有值hover的数据触发器：

<a href="#" rel="popover" data-placement="bottom" data-popover-content="#myPopover" data-trigger="hover">My Popover</a>

https://jsfiddle.net/amxLak5d/1/