1

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>

Improve this question
1
  • Even when you trigger a mouse event on the a element you won't see the browsers URL preview appear. If you want that behaviour you'll need to restructure your HTML to rely on actual user-generated events instead of programmatically created ones. Commented Sep 15, 2021 at 14:56

2 Answers 2

Reset to default
1 

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

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

While this works (in Chrome on Win10 at least) note that it's a non-standard hack which will probably be patched out at some point. As per the button element spec: '... there must be no interactive content descendant.' w3.org/TR/2012/WD-html5-20120329/…
As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
1

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.
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.