如何在不同元素上触发鼠标悬停以在元素上进行鼠标悬停？

Question

我在按钮上添加了一个 mouseover 事件。在那种情况下，我在锚上调用 mouseover 事件。但是，那个锚 mouseover 没有被正确触发。我无法在左下角看到 URL 预览，就像我可以看到是否将鼠标悬停在锚元素上一样。我怎样才能正确触发锚点上的鼠标悬停？

$(document).ready(function() {  
  $("button.pdfbutton").mouseover(function(e) {
    $("#anchorelem").show();
    $("#anchorelem").mouseover();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<button class="pdfbutton">PDF</button>
<a href="https://google.com" id="anchorelem" style="display: none;">Some text</a>

Answer 1

浏览器左下角 <a> 元素的 URL 预览（据我所知）不是由 JS 事件触发的（这意味着您不能通过调用mouseover())。它只是浏览器本机功能。如果你想显示预览，我会建议以下之一：

创建一个 <a> 元素并将其设置为看起来像普通按钮的样式。然后当有人将鼠标悬停在它上面时，他们会看到它导致的 link。
创建一些其他隐藏元素，其中包含您希望在用户将鼠标悬停在按钮上时显示的文本。然后设置按钮以在用户将鼠标悬停在该按钮上时显示该元素。

Answer 2

$(document).ready(function() {
  $("button.pdfbutton").mouseover(function(e) {
    $("#anchorelem").show();
    $("#anchorelem").mouseover();
    $("#txt_lnk").bind('click', false);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<button class="pdfbutton">
  <a id="txt_lnk" href="http://text-to-show" style="text-decoration:none; color:black;">PDF</a>
</button>
<a href="http://google.com" id="anchorelem" style="display: none;">Some text</a>

如何在不同元素上触发鼠标悬停以在元素上进行鼠标悬停？

How to trigger mouseover on a different element for a mouseover on an element?

javascript

jquery

mouseover