如何将 onClick 更改为 onHover 功能？ [复制]答案

【问题标题】：How to change the onClick to onHover functionality? [duplicate]如何将 onClick 更改为 onHover 功能？ [复制]
【发布时间】：2018-01-20 18:17:22
【问题描述】：

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

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

【问题讨论】：

请附上链接或一段代码。没有内容。
对不起，我是新来的，现在我正在编辑它
我在下面添加了一个解决方案。或者，查看重复的建议。
问题本身没有代码，这个问题是题外话。这里的问题和答案是为将来的读者准备的，如果删除了 JS Fiddle 链接，则意味着问题（以及任何答案）也需要删除。你现在能解决这个问题吗？

标签： javascript jquery html css twitter-bootstrap

【解决方案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

【讨论】：

谢谢兄弟的帮助
欢迎好友:)
这对 Shiladitya 很有帮助，但在回答之前等待问题成为主题可能会更好。仅包含代码外部链接的问题可能会被关闭，因为我们希望它们是独立的。这可以防止未来的链路中断。我的经验是，一旦新社区成员得到答案，他们就不太可能编辑问题以使其独立。
@halfer.. 我明白你的意思。今后我会牢记在心。 :)

【解决方案2】：

使用弹出框更改元素以包含值为hover 的数据触发器：

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

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

【讨论】：