将鼠标悬停在链接上时如何防止弹出框？

Question

I am trying to fix my webpage. I have a small problem. When I hover over my link this pop up box covers the text. What would be the best method to fix this? Thanks for any tips

I have added an img below for better understanding. http://imgur.com/a/Nwqv4

<html> 
<head> 
<title>010101010101010110101010010101010101010110101010</title> 
 <link rel="shortcut icon" type="image/png" href="red.png"/>  

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<style type="text/css"> 
    body {
        background-color: black 
    }
    #console {
        font-family: courier, monospace;
        color: white;
        width:750px;
        margin-left:auto;
        margin-right:auto;
        margin-top:100px;
        font-size:14px;
    }
    #x {
        color: red;
    }
    #d {
        color: #0f0;
    }
    a {
        color: white;
        text-decoration: none;
    }
    #a {
        color: #0f0;
    }
    #c {
        color: #0bc;
    }
    #b {
        color: #ff0096;
    }

    #green {
        color: green;
    }


    #red {
        color: red;
    }
</style> 
</head> 
<body> 
<script type="text/javascript"> 
    var Typer={
    text: null,
    accessCountimer:null,
    index:0, // current cursor position
    speed:1, // speed of the Typer
    file:"", //file, must be setted
    accessCount:0, //times alt is pressed for Access Granted
    deniedCount:0, //times caps is pressed for Access Denied
    init: function(){// inizialize Hacker Typer
        accessCountimer=setInterval(function(){Typer.updLstChr();},600); // inizialize timer for blinking cursor
        $.get(Typer.file,function(data){// get the text file
            Typer.text=data;// save the textfile in Typer.text
            Typer.text = Typer.text.slice(0, Typer.text.length-1);
        });
    },

    content:function(){
        return $("#console").html();// get console content
    },

    write:function(str){// append to console content
        $("#console").append(str);
        return false;
    },

    makeAccess:function(){//create Access Granted popUp      FIXME: popup is on top of the page and doesn't show is the page is scrolled
        Typer.hidepop(); // hide all popups
        Typer.accessCount=0; //reset count
        var ddiv=$("<div id='gran'>").html(""); // create new blank div and id "gran"
        ddiv.addClass("accessGranted"); // add class to the div
        ddiv.html("<h1>ACCESS GRANTED</h1>"); // set content of div
        $(document.body).prepend(ddiv); // prepend div to body
        return false;
    },
    makeDenied:function(){//create Access Denied popUp      FIXME: popup is on top of the page and doesn't show is the page is scrolled
        Typer.hidepop(); // hide all popups
        Typer.deniedCount=0; //reset count
        var ddiv=$("<div id='deni'>").html(""); // create new blank div and id "deni"
        ddiv.addClass("accessDenied");// add class to the div
        ddiv.html("<h1>ACCESS DENIED</h1>");// set content of div
        $(document.body).prepend(ddiv);// prepend div to body
        return false;
    },

    hidepop:function(){// remove all existing popups
        $("#deni").remove();
        $("#gran").remove();
    },

    addText:function(key){//Main function to add the code
        if(key.keyCode==18){// key 18 = alt key
            Typer.accessCount++; //increase counter 
            if(Typer.accessCount>=3){// if it's presed 3 times
                Typer.makeAccess(); // make access popup
            }
        }else if(key.keyCode==20){// key 20 = caps lock
            Typer.deniedCount++; // increase counter
            if(Typer.deniedCount>=3){ // if it's pressed 3 times
                Typer.makeDenied(); // make denied popup
            }
        }else if(key.keyCode==27){ // key 27 = esc key
            Typer.hidepop(); // hide all popups
        }else if(Typer.text){ // otherway if text is loaded
            var cont=Typer.content(); // get the console content
            if(cont.substring(cont.length-1,cont.length)=="|") // if the last char is the blinking cursor
                $("#console").html($("#console").html().substring(0,cont.length-1)); // remove it before adding the text
            if(key.keyCode!=8){ // if key is not backspace
                Typer.index+=Typer.speed;   // add to the index the speed
            }else{
                if(Typer.index>0) // else if index is not less than 0 
                    Typer.index-=Typer.speed;// remove speed for deleting text
            }
            var text=Typer.text.substring(0,Typer.index)// parse the text for stripping html enities
            var rtn= new RegExp("\n", "g"); // newline regex

            $("#console").html(text.replace(rtn,"<br/>"));// replace newline chars with br, tabs with 4 space and blanks with an html blank
            window.scrollBy(0,0); // scroll to make sure bottom is always visible
        }
        if ( key.preventDefault && key.keyCode != 122 ) { // prevent F11(fullscreen) from being blocked
            key.preventDefault()
        };  
        if(key.keyCode != 122){ // otherway prevent keys default behavior
            key.returnValue = false;
        }
    },

    updLstChr:function(){ // blinking cursor
        var cont=this.content(); // get console 
        if(cont.substring(cont.length-1,cont.length)=="|") // if last char is the cursor
            $("#console").html($("#console").html().substring(0,cont.length-1)); // remove it
        else
            this.write("|"); // else write it
    }
}

function replaceUrls(text) {
    var http = text.indexOf("http://");
    var space = text.indexOf(".me ", http);
    if (space != -1) { 
        var url = text.slice(http, space-1);
        return text.replace(url, "<a href=\""  + url + "\">" + url + "</a>");
    } else {
    return text
}
}
Typer.speed=20;
Typer.file="index.txt";
Typer.init();

var timer = setInterval("t();", 30);
function t() {
    Typer.addText({"keyCode": 123748});
    if (Typer.index > Typer.text.length) {
        clearInterval(timer);
    }
}

</script> 
<div id="console"></div> 
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-610661-7']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</body> 
</html> 

.txt

<span id="green">
iIYVVVVXVVVVVVVVVYVYVYYVYYYYIIIIYYYIYVVVYYYYYYYYYVVYVVVVXVVVVVYI+.
tYVXXXXXXVXXXXVVVYVVVVVVVVVVVVYVVVVVVVVVVVVVVVVVXXXXXVXXXXXXXVVYi.
iYXRXRRRXXXXXXXXXXXVVXVXVVVVVVVVXXXVXVVXXXXXXXXXXXXXXRRRRRRRRRXVi.
tVRRRRRRRRRRRRRRRXRXXXXXXXXXXXXXXRRXXXXRRRRXXXXXXXRRRRRRRRRRRRXV+.
tVRRBBBRMBRRRRRRRRRXXRRRRRXt=+;;;;;==iVXRRRRXXXXRRRRRRRRMMBRRRRXi,
tVRRBMBBMMBBBBBMBBRBBBRBX++=++;;;;;;:;;;IRRRRXXRRRBBBBBBMMBBBRRXi,
iVRMMMMMMMMMMMMMMBRBBMMV==iIVYIi=;;;;:::;;XRRRRRRBBMMMMMMMMBBRRXi.
iVRMMMMMMMMMMMMMMMMMMMY;IBWWWWMMXYi=;:::::;RBBBMMMMMMMMMMMMMMBBXi,
+VRMMRBMMMMMMMMMMMMMMY+;VMMMMMMMRXIi=;:::::=VVXXXRRRMMMMMMMMBBMXi;
=tYYVVVXRRRXXRBMMMMMV+;=RBBMMMXVXXVYt;::::::ttYYVYVVRMMMMMMBXXVI+=
;=tIYYVYYYYYYVVVMMMBt=;;+i=IBi+t==;;i;::::::+iitIIttYRMMMMMRXVVI=;
;=IIIIYYYIIIIttIYItIt;;=VVYXBIVRXVVXI;::::::;+iitttttVMMBRRRVVVI+,
;+++tttIttttiiii+i++==;;RMMMBXXMMMXI+;::::::;+ittttitYVXVYYIYVIi;;
;===iiittiiIitiii++;;;;:IVRVi=iBXVIi;::::::::;==+++++iiittii+++=;;
;;==+iiiiiiiiii+++=;;;;;;VYVIiiiVVt+;::::::::;++++++++++iti++++=;;
;;=++iiii+i+++++iii==;;;::tXYIIYIi+=;:::::,::;+++++++++++++++++=;;
;;;+==+ii+++++iiiiit=;;:::::=====;;;::::::::::+++i+++++++++i+++;;;
;;;==+=+iiiiitttIIII+;;;:,::,;;;;:;=;;;::,::::=++++++++==++++++;;;
:;====+tittiiittttti+;;::::,:=Ytiiiiti=;:::::,:;;==ii+ittItii+==;;
;;+iiittIti+ii;;===;;:;::::;+IVXVVVVVVt;;;;;::::;;===;+IIiiti=;;;;
;=++++iIti+ii+=;;;=;:::;;+VXBMMBBBBBBXY=;=;;:::::;=iYVIIttii++;;;;
;;++iiiItttIi+++=;;:::;=iBMMMMMMMMMMMXI==;;,::;;:;;=+itIttIIti+;;;
;=+++++i+tYIIiii;:,::;itXMMMMMMMMMMMBXti==;:;++=;:::::;=+iittti+;;
;;+ii+ii+iitiIi;::::;iXBMMMMMWWWWWMMBXti+ii=;::::,,,,:::=;==+tI+;;
;;iiiitItttti;:::;::=+itYXXMWWWWWWMBYt+;;::,,,,,,,,,,,,,:==;==;;;;
:;=iIIIttIt+:;:::;;;==;+=+iiittttti+;;:,:,,,,::,,,,,,,,:::;=;==::;
;::=+ittiii=;:::::;;;:;:;=++==;;==;:,,,,,,:;::::,,,,,,,,::;==;;::;
:::;+iiiii=;::::,:;:::::;;:;;::;:::,,,,,,,:::;=;;;:,,,,,:::;;::::;
:;;iIIIIII=;:::,:::::::,::::,:::,,,,,,,,,,,:;;=;:,,,,,,::::;=;:::;
:;==++ii+;;;:::::::::::,,,,,,::,,,,,,,,,,,::::,,,,,,,,,,:,:::::::;
::;;=+=;;;:::;;::,,,,,,,,,,,,,,,,,,,,,,,,,:,,,,,,,,,,,,,,,,,:::::;
::;=;;;:;:::;;;;::,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,::,,::::;
:;;:;::::::,::,,:,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,:::;
:::::::::::;;;:,,,,,,,,,,,,,...,...,,,.,,,,,,,,,,,,.,,,,,,,,,,,,:;
::::::::;=;;;;;::,,,,,,,,,,,.......,...,,,,,,,,,,,,.,,,,,,,,,,,,,;
:::::,,:;=;;;;;;;iVXXXVt+:,,....,,,,....,.,,,,,,,.,.....,,,,,,,,:;
:,,::,,:::;;;;;;=IVVVXXXXVXVt:,,,,,..,..,,,,.,,,,,..,.,,,,,,,,,,,;
::,::,,,:,:::::,::;=iIYVXVVVVIYIi;,,.,.,,,::,,,,,,,,,,,,,,,,,,,,,.
:,,,,,,,,,,,,,,,,::;+itIIIIIIi:;;i++=;;;;;;;;;::,,,...,,..,,,,,,,.
:,,,,,,,,,,,,,,=iitVYi++iitt==it;;:;;;;::;;::::,,,......,,,,,,,::.
::,,,,,,,,,,,,,++iiIVIi=;;=;+i;:;+:::,,,,,,,,,,,,,.....,,,,,,,,::,
,,,,,,,,,,,,,,,;=+it=:::,,,,,,,,,,.,......,,.,..........,,,,,,,,::
:,,,,,,,,,,,,,,,,:=:,,,,,,,,,,,,,,......................,.,,.,.,,:
:,,,,,,,,,,,,,,,,,:,,,,,,,,,,..,........................,..,...,,:
,,,,,,,,,,,,,,,,,,,.....................................,.......,,
,,,,,,,,,.,,,,,,,...............................................,,
itittiiiii+=++=;;=iiiiiiittiiiiii+iii===;++iiitiiiiiii+=====+ii=+i
</span>

<a href="journey.html">Let us go for a journey....</a>

Answer 1

It's browser's status bar and you can't turn that off.

In most cases you won't see it and it only shows up when it needs to.

Even if you didn't want it to appear every time you hover over a link, it's one feature that you just can't turn off .

I'd suggest you to move its position to the right.

<a style="float:right;" href="journey.html">Let us go for a journey....</a>

Answer 2

Chrome reads the HREF attribute from your link to display the link in the status bar.

So if you remove the HREF from your A tags, the status bar will not be displayed. However the link won't work either, :). That's why you can create an event handler on MouseOver to address that and keep your links working.

$("body").on('mouseover', 'a', function (e) {
    var $link = $(this),
        href = $link.attr('href') || $link.data("href");

    $link.off('click.chrome');
    $link.on('click.chrome', function () {
        window.location.href = href;
    })
    .attr('data-href', href) //keeps track of the href value
    .css({ cursor: 'pointer' })
    .removeAttr('href'); // <- this is what stops Chrome to display status bar
});

You might run in extra issues, like disabled links or links that have other event handlers. In this case, you can tweak your selector to 'a:not(.disabled)' or perhaps just add this delegation to known elements with the css class ".disable-status", therefore your selector would be: "a.disable-status".

Answer 3

I used a onclick to fix this,

So right now my code is

<div id='link'>
    <a id='pro1' onclick="location.href='./pages/langs.html';"></a>
</div>

tht creates another way to use a link without the bar at the bottom, Youd have to use CSS to remove Text Deco ect, or just config links but it works great overall.

For you,

<a onclick="location.href='journey.html';">Let us go for a journey....</a>

CREATES: Let us go for a journey....