堆栈内存溢出
  繁体   English   中英

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

[英]How can I prevent pop up box when hovering over link?

 原文  2016-12-16 06:53:29  3   3    javascript/ html/ css

问题描述

我正在尝试修复我的网页。 我有一个小问题。 当我将鼠标悬停在我的链接上时，此弹出框会覆盖文本。 解决此问题的最佳方法是什么？ 感谢您的任何提示

我在下面添加了一个 img 以便更好地理解。 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>

。文本

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

3 个解决方案

解决方案1
 0  2016-12-16 09:37:45

它是浏览器的状态栏，您无法将其关闭。

在大多数情况下，您不会看到它，它只会在需要时显示。

即使您不希望每次将鼠标悬停在链接上时它都出现，它也是您无法关闭的一项功能。

我建议你把它的位置向右移动。

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

解决方案2
 0  2016-12-16 09:51:17

Chrome 从您的链接中读取 HREF 属性以在状态栏中显示该链接。

因此，如果您从 A 标记中删除 HREF，将不会显示状态栏。 但是链接也不起作用，:)。 这就是为什么你可以在 MouseOver 上创建一个事件处理程序来解决这个问题并保持你的链接工作。

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

您可能会遇到额外的问题，例如禁用链接或具有其他事件处理程序的链接。 在这种情况下，您可以将选择器调整为 'a:not(.disabled)' 或者只是将此委托添加到具有 css 类“.disable-status”的已知元素，因此您的选择器将是：“a.disable-地位”。

解决方案3
 0  2020-08-05 06:58:00

我用onclick来解决这个问题，

所以现在我的代码是

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

这创建了另一种使用底部没有栏的链接的方法，您必须使用 CSS 来删除 Text Deco ect，或者只是配置链接，但总体上效果很好。

为你，

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

创造：让我们去旅行吧……

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 将鼠标悬停在电子表格类型框上时如何创建弹出框？ [等候接听] 如何将鼠标悬停在导航链接上时防止持续闪烁？ 试图找出如何将鼠标悬停在javascript的缩略图上时在弹出框中显示更大的图像 将鼠标悬停在此网站上的“购物车”链接上时，如何实现显示的弹出框 将鼠标悬停在链接上时如何更改图像？ 悬停在节点上时弹出 HTML CSS JS：悬停在图像上时无法打开弹出信息框 悬停<a>标签时</a>如何弹出div <a>？</a> 将鼠标悬停在 bootstrap 5 卡上时如何弹出模式？ 将鼠标悬停在特定文本上时，我尝试创建弹出框类型，但文本仅隐藏而不会进一步显示
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM