如何更改我的 css 以使超链接可见[使用最少的示例代码]？

【问题标题】：How to change my css to make hyper link visible [ with minimum sample code ]?如何更改我的 css 以使超链接可见[使用最少的示例代码]？
【发布时间】：2021-11-30 09:07:21
【问题描述】：

我有一个带有 CSS 的网站，但超链接不可见 [右侧]，如何更改我的 html/css 以使超链接可见 [如以下图片的左侧]？

我已经简化了我的网站以显示问题，这里是最少的示例代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>GATE Cyber Technology : Award Winning Innovation For Identity And Access Management</title>
    <meta name="description" content="GATE Cyber Technology LLC. INTERCEPTION-RESISTANT AUTHENTICATION AND ENCRYPTION SYSTEM AND METHOD. Introducing a breakthrough digital security innovation : Graphic Access Tabular Entry [ GATE ], an interception-resistant authentication and encryption system and method. With the GATE system you are not afraid that you are watched when you enter passwords, and you are not afraid that the password will be intercepted, the GATE innovative method is designed to be peek-resistant and interception-resistant. The GATE system and method will offer you better digital security. Identity and Access Management (IAM)">
    <meta name="keywords" content="GATE Cyber Technology LLC. INTERCEPTION-resistant AUTHENTICATION AND ENCRYPTION SYSTEM AND METHOD, Graphic Access Tabular Entry [ GATE ], GATE security, GATE authentication, GATE login, GATE user authentication, GATE password, GATE passcode, peek-resistant, online security, digital security, passwords, password protection, strong password, strong cybersecurity, strong user authentication, prevent password loss, prevent user credential loss, passcode, cyber security, pin, login, logon, digital access, online access, access control, online protection, digital protection, online defence, digital defence, message encryption, message decryption, signal encryption, signal decryption, overcome weakness of traditional password, the GATE system, award winning, better than fingerprinting, better than iris scanning, safer than keyfob, better than password manager, safer password entry, Identity and Access Management (IAM), GATE defeats wiretapping, keylogging, peeking, phishing and dictionary attack, no restrictions of traditional password's lowercase, uppercase, numbers and special characters requirements, easy to use">
    <meta name="google-site-verification" content="cXY5hsdt7XCjR_k96nha7Hn5uW4fw_1u6mc2LWDyAQ0" />
    <link rel="shortcut icon" href="favicon.ico">

    <link media="all" type="text/css" rel="stylesheet" href="https://cdn.ahrefs.com/assets/css/bootstrap.min.css">
    <link media="all" type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,300,100italic,100,300italic,400italic,700,700italic,900,900italic">
    <link media="screen" type="text/css" rel="stylesheet" href="https://cdn.ahrefs.com/assets/css/home-responsive.css?20180815-001">

    <link media="all" type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
    <link media="all" type="text/css" rel="stylesheet" href="css/css.css">
    <link media="screen" type="text/css" rel="stylesheet" href="css/home-responsive.css">

    <meta property="og:image" content="GATE_1.PNG">

    <style>
      div.Intro
      {
        font-size: 100%;
        text-align: left;
      }

      div.Table
      {
        font-size: 218%;
        text-align: center;
      }

      a:hover { color:#ddeeff; }
      a:visited { color:#E8E8E8 }
     
      tr a{ font-size: 18px;color:#aabbcc; }
      tr a:hover { color:#ddeeff; }

      .pic-container-1{display:block; position:relative; }
      .pic-container-1 .pic-box{display:block;}
      .pic-container-1 .pic-box img{display:block;}
      .pic-container-1 .pic-hover{position:absolute; top:0px; left:104px; display:none;}
      .pic-container-1:hover .pic-hover{display:block;}

      .pic-container-2{display:block; position:relative; }
      .pic-container-2 .pic-box{display:block;}
      .pic-container-2 .pic-box img{display:block;}
      .pic-container-2 .pic-hover{position:absolute; top:0px; left:18px; display:none;}
      .pic-container-2:hover .pic-hover{display:block;}

      .pic-container-3{display:block; position:relative; }
      .pic-container-3 .pic-box{display:block;}
      .pic-container-3 .pic-box img{display:block;}
      .pic-container-3 .pic-hover{position:absolute; top:0px; left:20px; display:none;}
      .pic-container-3:hover .pic-hover{display:block;}

      .pic-container-4{display:block; position:relative; }
      .pic-container-4 .pic-box{display:block;}
      .pic-container-4 .pic-box img{display:block;}
      .pic-container-4 .pic-hover{position:absolute; top:0px; left:18px; display:none;}
      .pic-container-4:hover .pic-hover{display:block;}

      #GATE_Frame_1 { width: 78%; height: auto; }
      #GATE_Frame_2 { width: 98%; height: auto; }

      #Balance { width: 80%; height: auto; }
      
      #Ted_Murphree_img { width: 36vw; height: auto; }
      #Scott_Schober_img { width: 36vw; height: auto; }
      #Cary_Pool_img { width: 36vw; height: auto; }
      #Eduard_B_img { width: 36vw; height: auto; }
      #Jonathan_Rosenoer_img { width: 36vw; height: auto; }

      #Traditional_vs_GATE_1 { width: 96%; height: auto; }
      #Traditional_vs_GATE_2 { width: 99.5%; height: auto; }

      #modal
      {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        max-height: 100vh;
        top: 0;
        left: 0;
        background: rgba(24, 24, 24, .6);
        z-index: 999;
      }
      #modal .content
      {
        position: relative;
        width: 55%;
        height: 65vh;
        margin: auto; /* allows horyzontal and vertical alignment as .content is in flex container */
      }
      #modal .content .yt-video
      {
        display: block;
        width: 100%;
        height: calc(100% - 45px);
      }
      #modal .content .title
      {
        box-sizing: border-box;
        height: 45px;
        line-height: 23px;
        padding: 12px 4px;
        margin: 0;
        background: #007bff;
        color: #fff;
        text-align: center;
        font-size: 26px;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      #modal .close
      {
        position: absolute;
        top: 0;
        right: 0;
        width: 45px;
        height: 45px;
        line-height: 36px;
        text-align: center;
        border: 0;
        font-weight: bold;
        font-size: 38px;
        color: #fff;
        background: #366;
        cursor: pointer;
        transition: background .2s;
      }
      #modal .content .close .a { font-size:38px;color: #ffffff; }
      #modal .close:hover, #modal .close:active { background: #ff0000; }
      #modal.is-visible { display: flex; }

      html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
      fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
      {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: middle;
      }

      /* HTML5 display-role reset for older browsers */
      article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
      body { line-height: 1; }
      // ol, ul { list-style: none; }
      blockquote, q { quotes: none; }
      blockquote:before, blockquote:after,
      q:before, q:after
      {
        content: '';
        content: none;
      }
      table
      {
        border-collapse: collapse;
        border-spacing: 0;
      }
    </style>
  </head>

  <body class="page__guest ahrefs page-home">
    <div id="localizejs">
      <div class="content">
        <a id="Awards"></a>
        <div class="datas">
          <div class="container center">
            <Table Cellpadding=6>
              <Tr>
                <Td Align=Center><Br>
                  <Font Color=white><A Href=http://bestech.ittn.com.cn/#/projectlist2021 target=_blank>GATE has been selected</A> to the <A Href="2021_ZGC_Top_100_List_1.PNG" target=_blank>top 100</A>,<Br> among more than 2800 technologies collected<Br> from all over the world at 2021 ZGC<Br><A Href=http://bestech.ittn.com.cn/#/home target=_blank>International Technology Trade Conference</A>.</Font>
                </Td>
              </Tr>
            </Table>
          </div>
        </div>

    <!-- the modal div that will open when an anchor link is clicked to show the related video in an iframe. -->

    <div id="modal">
      <div class="content">
        <div class="close"><a onclick = "return close_iFrame();">&times;</a></div>
        <h4 class="title">.</h4>
        <iframe class="yt-video" allowfullscreen></iframe>
      </div>
    </div>

    <script>
      var modal = document.getElementById('modal'),
          closeBtn = modal.querySelector('close'),
          ytVideo = modal.querySelector('.content .yt-video'),
          title = modal.querySelector('.content .title'),
          anchors = document.querySelectorAll('a[data-target="modal"]'),
          l = anchors.length;

      for (var i = 0; i < l; i++)
      {
        anchors[i].addEventListener("click", function (e)
        {
          e.preventDefault();
          title.textContent = this.dataset.videoTitle || 'No title';
          ytVideo.src = this.href;
          modal.classList.toggle('is-visible');
          modal.focus();
        });
      }

      modal.addEventListener("keydown", function (e)
      {
        if (e.keyCode == 27)
        {
          title.textContent = '';
          ytVideo.src = '';
          this.classList.toggle('is-visible');
        }
      });
    </script>

    <script type="text/javascript">

      function close_iFrame()
      {
        var modal = document.getElementById('modal'),
            ytVideo = modal.querySelector('.content .yt-video');

        ytVideo.src = '';
        modal.classList.toggle('is-visible');

        // Opera 8.0+
        var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

        // Firefox 1.0+
        var isFirefox = typeof InstallTrigger !== 'undefined';

        // Safari 3.0+ "[object HTMLElementConstructor]" 
        var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);

        // Internet Explorer 6-11
        var isIE = /*@cc_on!@*/false || !!document.documentMode;

        // Edge 20+
        var isEdge = !isIE && !!window.StyleMedia;

        // Chrome 1+
        var isChrome = !!window.chrome && !!window.chrome.webstore;

        // Blink engine detection
        var isBlink = (isChrome || isOpera) && !!window.CSS;

        var output = 'Detecting browsers by ducktyping :\n===========================\n';
        output+='isChrome: '+isChrome+'\n';      // 57.8 % Market Share
        output+='isSafari: '+isSafari+'\n';      // 14.0 %
        output+='isFirefox: '+isFirefox+'\n';    // 6.0 %
        output+='isIE: '+isIE+'\n';
        output+='isEdge: '+isEdge+'\n';          // 5.9 %  IE + Edge
        output+='isOpera: '+isOpera+'\n';        // 3.7 %
        output+='isBlink: '+isBlink+'\n';

//        alert(output+'[ history.length = '+history.length+' ]');

        if (isChrome)                            // 57.8 % [ Will work correctly only after 3rd+ time of going to the #Videos section ]
        {
/*
[1] No code : after 1st play, "back" plays sound
              after 2nd play, "back" also plays sound, remembers history
              after play 2 videos, 1 "back" plays last vodeo, 2 "back" does nothing, 3 "back" plays 2nd last video
              Seems to remember [ empty ] + [ video ]

Memory pattern : Top [video_1] [ ] [video_2] ?
*/

          if (!sessionStorage.getItem("runOnce")) // 1st time : Remembers 1st video  // 2nd time : back to top after closing iFrame  // 3rd time+ : works correctly
          {
            // alert('runOnce');
            window.history.replaceState({},"Videos","#Videos");
//            window.location.href='#Videos';
//            history.go(0);
            sessionStorage.setItem("runOnce",true);
          }
          else
          {
            window.history.replaceState({},"Videos","#Videos");
            history.go(-1);
          }

        }
        else if (isSafari)                       // 14.0
        {

        }
        else if (isFirefox)                      // 6.0 % [ Works correctly ]
        {
          history.go(-1);
        }
        else if (isIE)
        {
            window.history.replaceState({},"Videos","#Videos");
        }
        else if (isEdge)                         // 5.9 %  IE + Edge
        {
            history.go(-1);
        }
        else if (isOpera)                        // 3.7 %
        {
            history.go(-1);
        }
        else if (isBlink)
        {
            history.go(-1);
        }
//alert( window.location.href );
//        history.go(-1);
//window.location.href = '#Videos';
//history.replaceState({}, "#Videos", "#Videos");
//alert( window.location.href );
      }

      window.onload = function()
      {
        // Opera 8.0+
        var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

        // Firefox 1.0+
        var isFirefox = typeof InstallTrigger !== 'undefined';

        // Safari 3.0+ "[object HTMLElementConstructor]" 
        var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);

        // Internet Explorer 6-11
        var isIE = /*@cc_on!@*/false || !!document.documentMode;

        // Edge 20+
        var isEdge = !isIE && !!window.StyleMedia;

        // Chrome 1+
        var isChrome = !!window.chrome && !!window.chrome.webstore;

        // Blink engine detection
        var isBlink = (isChrome || isOpera) && !!window.CSS;

        var output = 'Detecting browsers by ducktyping :\n===========================\n';
        output+='isChrome: '+isChrome+'\n';      // 57.8 % Market Share
        output+='isSafari: '+isSafari+'\n';      // 14.0 %
        output+='isFirefox: '+isFirefox+'\n';    // 6.0 %
        output+='isIE: '+isIE+'\n';
        output+='isEdge: '+isEdge+'\n';          // 5.9 %  IE + Edge
        output+='isOpera: '+isOpera+'\n';        // 3.7 %
        output+='isBlink: '+isBlink+'\n';

//        alert(output);

        if (isIE) 
        {
//          alert(output);
          var pichover=document.getElementsByClassName("pic-hover");
          pichover[0].style.left="107px";
          pichover[1].style.left="24px";
          pichover[2].style.left="23px";
          pichover[3].style.left="21px";
       }
     }


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

【问题讨论】：

  • 抱歉，375 行代码，其中一半是 JavaScript，对于这样一个基本的 CSS 问题，绝不是“最少的”。根据您的个人资料，您在此网站上的时间和参与时间已经足够长，以至于您意识到这不是一个好问题。

标签： html css hyperlink


【解决方案1】：

但这很糟糕

a[href] {color: blue !important, text-decoration: underline !important}

【讨论】：

  • 虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高​​答案的长期价值。您可以在帮助中心找到更多关于如何写好答案的信息：stackoverflow.com/help/how-to-answer。祝你好运?
【解决方案2】：

我已经通过@Ki 的提示解决了这个问题[非常感谢^_^！ ]

虽然您的回答没有直接显示解决方案，但它为我指明了正确的方向，因此经过更多的研究和测试，我终于得出了正确的结论，您的回答比其他人的评论更有帮助在这里呆了太久没有意识到这一点，我什至不想重复说过的话[浪费时间！ ]

a:link { 颜色:#d8d8d8 ;文字装饰：下划线 }

这个问题和答案将对有类似问题的其他人有用！

【讨论】：

    猜你喜欢
    • 1970-01-01
    • 2011-09-15
    • 2010-12-01
    • 1970-01-01
    • 1970-01-01
    • 2014-07-04
    • 1970-01-01
    • 2016-12-22
    • 2020-12-24
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode