Show url display in bottom-left by JS?

问题

Is there any trick to displaying url on bottom left of page by Javascript ?

Example my link element is :

<div data-link="http://stackoverflow.com"></div>

JS :

$(document).on('click','[data-link]',function(){
    var url = $(this).attr('data-link');
    window.open(url,'_blank');
}).on('mouseover','[data-link]',function(){
    var a = document.createElement('a');
    a.href = $(this).attr('data-link');
    $(a).trigger('mouseover');
    // Nothing showing
});

Possible ? Any trick ?

回答1:

As far as I know this is not possible with Javascript, this is a browser-specific function that only triggers when your mouse hovers over a link. If you trigger the .hover() with JS, it "only" applies the CSS-Rules and fires the JS-Functions.

You could create an absolute positioned div with the link-tag and show this when you hover over an element, but it could cause problems when you hover over an actual A-Tag, then your div will get hidden under the browser-field.

回答2:

Is this what you are looking for?

$('a').mouseover(function() {
    var url = $(this).attr('href');
    var style = "position: fixed; left: 0; bottom: 0; z-index: 1000000;";
    $('body').append("<b id='urlDisplay' style='" + style + "'>" + url + "</b>");
});
$('a').mouseout(function() { $('#urlDisplay').remove(); });

Make it prettier by putting the css elsewhere!

来源：https://stackoverflow.com/questions/37341986/show-url-display-in-bottom-left-by-js