I have added a mouseover event on the button. In that event, I am calling the mouseover event on the anchor. However, that anchor mouseover is not properly triggered. I am not able to see the URL preview at the bottom left corner, like I could see if I hover the over the anchor element. How could I properly trigger mouseover on an anchor?

$(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>

CodePudding user response：

The URL preview of an <a> element in the bottom left corner of your browser is (far as I know) not triggered by a JS event (which means you cannot trigger it by calling mouseover()). It is just browser native functionality. If you want to show the preview I would suggest one of the following:

1. Create an <a> element and style it to look like a regular button. Then when someone hovers over it, they will see the link it leads to.
2. Create some other hidden element that contains a text you want to display when the user hovers over the button. Then set up the button to show that element when the user hovers over that button.

CodePudding user response：

$(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>