JSの左下にURL表示を表示しますか？

Question

ページの左下にURLを表示する方法はありますかJavascript？

例私のlink要素は次のとおりです。

<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 
}); 

可能？どんなトリックですか？

Answer 1

私が知る限り、これはJavascriptでは不可能ですが、これはマウスがリンク上を移動するときにだけトリガするブラウザ固有の機能です。 JSで.hover（）をトリガーすると、CSS-Rulesが "のみ"適用され、JS関数が起動されます。

リンクタグを使って絶対配置されたdivを作成し、要素の上にカーソルを置いたときにこれを表示できますが、実際のAタグにカーソルを合わせると問題が発生する可能性があります-フィールド。

Answer 2

これはあなたが探しているものですか？

$('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(); }); 

cssを別の場所に置くともっときれいになります。