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