CODEWITHSUNDEEP
javascriptjquerymouseover
soham
soham

Reputation: 1668

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

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>

Upvotes: 1

Views: 760

Answers (2)

ABC12421
ABC12421

Reputation: 26

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

Upvotes: 1

minitauros
minitauros

Reputation: 2030

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.

Upvotes: 1

Related Questions