文章/答案/技术大牛

发布

社区首页 >问答首页 >谷歌翻译按钮，禁用一些链接

问谷歌翻译按钮，禁用一些链接
EN

Stack Overflow用户

提问于 2022-05-18 12:01:25

回答 1查看 82关注 0票数 1

我正在做一个视频游戏新闻和更新网站，我必须添加一个翻译选项，所以我决定添加谷歌翻译按钮，但它禁用了菜单中的链接，在正确的side.Please帮助！

HTML：

<!DOCTYPE html>
<head>
    <title> GameDog | Video games info </title>
    
    <meta charset = "UTF-8">
    <link rel="stylesheet" type = "text/css" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet"> 
    
</head>

<body>
    <section class="page">
        <nav>
            <div class="logo">
                <img src = "gamedoglogo.png">
                <p> <b> GameDog </b> </p>
            </div>

            <div>
                <ul>
                    <li>
                        <div class="toggle"></div>
                    </li>
                    <li id="aboutme"><a href = "aboutme.html">About me</a></li>
                    <li id="news">
                        <a href = "news.html">News about ↓</a>
                        <ul>
                            <li> <a href = "fortnite.html">Fortnite</a></li>
                            <li> <a href = "rl.html">Rocket League</a></li>
                            <li> <a href = "lol.html">League of Legends</a></li>
                            <li> <a href = "cs.html">CS:GO</a></li>  
                        </ul>
                    </li>
                    <li id="main"><a href = "main.html">Home</a></li>
                </ul>
            </div>

        </nav>

        <h1 class="topic"> Home Page </h1>

        <div class = "card-info">
            <h3> Hey Gamers, </h3>
            <br>
            <h4> welcome to the site. Here you can find the latest news about your favourite games. We provide information about the current updates, changes and improvements. Here, in the site, you can also find the patch notes for the last update of your favourite games. Explore by clicking the button below or the News section above.</h4>
        </div>

        <div class = "button">
            <a href = "news.html"> Explore </a>
        </div>

        <div class="social">
            <ul>
                <li><a href="https://www.facebook.com/LachezarValev"> <img src="facebook%20white.png", id="facebook-main"></a></li>
                <li><a href="https://www.instagram.com/_lachovalev_/"> <img src="Black-icon-Instagram-logo-transparent-PNG.png", id="instagram-main"></a></li>
                <li><a href="https://twitter.com/LachezarValev"> <img src="Black-icon-Twitter-logo-transparent-PNG.png", id="twitter-main"></a></li>
            </ul>
        </div>

        <div class="translate-1">
            <div id="google_translate_element"></div>
                <span>
                    <script type="text/javascript">
                    function googleTranslateElementInit() {
                        new google.translate.TranslateElement({
                        pageLanguage: 'en', includedLanguages: 'de,it,fr,ru,tr,bg', autoDisplay: false,
                        layout: google.translate.TranslateElement.InlineLayout.SIMPLE
                        }, 'google_translate_element');
                    }
                    </script>
                    <script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
                </span>
        </div>
        
    </section>

    
    
    <div class="menu">
        <ul>
            <li> <a href="main.html"> Home </a></li>
            <li> <a href="news.html"> News </a></li>
            <li> <a href="aboutme.html"> About me </a></li>
        </ul>
        
        <div class="social-menu">
            <ul>
                <li><a href="https://www.facebook.com/LachezarValev"> <img src="toppng.com-facebook-black-white-icon-facebook-face-book-png-facebook-icon-for-footer-473x473.png", id="facebook-menu"></a></li>
                <li><a href="https://www.instagram.com/_lachovalev_/"> <img src="Black-icon-Instagram-logo-transparent-PNG.png", id = "instagram-menu"></a></li>
                <li><a href="https://twitter.com/LachezarValev"> <img src="Black-icon-Twitter-logo-transparent-PNG.png", id="twitter-menu"></a></li>
            </ul>
        </div>
            
    </div>
        
    <script>
        const menuToggle = document.querySelector('.toggle')
        const page = document.querySelector('.page')
        
        menuToggle.addEventListener('click', function() {
                                    menuToggle.classList.toggle('active')
                                    page.classList.toggle('active')
                                    })
    </script>
    
    <script>
        window.addEventListener("scroll", function(){
            var navbar = document.querySelector("nav");
            var menu = document.querySelector(".menu");
            navbar.classList.toggle("sticky", window.scrollY > 0);
            menu.classList.toggle("sticky", window.scrollY > 0);
        })
        
    </script>
    
</body>

CSS：

.menu{
    position:absolute;
    background-color:#ffd700;
    top:0;
    right:0;
    width:15.62vw;
    min-height:100vh;
    display:flex;
    justify-content: center;
    align-items:center;
    z-index:-5;
}

.menu.sticky{
    position:fixed;
}

.menu ul{
    position:relative;
    list-style:none;
}

.menu ul li{
    padding:1.04vh 1.04vw;
}

.menu ul li a{
    text-decoration: none;
    color:black;
    font-size:4.5ch;
}

.menu ul li a:hover{
    color:dimgray;
}

.translate-1{
    position:absolute;
    left:3vw;
    top:16vh;
    display:flex;
    justify-content: center;
    align-items:center;
}

.translate-2{
    position:absolute;
    left:3vw;
    top:76vh;
    display:flex;
    justify-content: center;
    align-items:center;
}

以下是一些照片：这是带有翻译按钮的页面。这是打开时右边的菜单

菜单中的链接，当你悬停在它们上时，应该变成灰色，但是由于谷歌翻译按钮，它们没有。当我删除谷歌翻译按钮，它工作，所以问题就在那里。

菜单的JS包含在html中，而且，我真的很抱歉我的格式不好，im是新来的:(

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-05-18 12:21:50

您的菜单有一个负的z-index值，所以它只是落后于一切。让它成为一个正值，或者完全删除它，你就被设置好了。如果您有在菜单上使用z-index的特定原因，那么您也需要将它添加到其他元素中，以便它们正确地分层，并且菜单项是可访问的。

因此，代码片段似乎不喜欢Google翻译脚本，因此这里有一个小提琴，它表明它仍然可以使用修改过的z-index属性：

https://jsfiddle.net/astombaugh/hwo73b64/8/

.menu {
  position: absolute;
  background-color: #ffd700;
  top: 0;
  right: 0;
  width: 15.62vw;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.menu.sticky {
  position: fixed;
}

.menu ul {
  position: relative;
  list-style: none;
}

.menu ul li {
  padding: 1.04vh 1.04vw;
}

.menu ul li a {
  text-decoration: none;
  color: black;
  font-size: 4.5ch;
}

.menu ul li a:hover {
  color: dimgray;
}

.translate-1 {
  position: absolute;
  left: 3vw;
  top: 16vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.translate-2 {
  position: absolute;
  left: 3vw;
  top: 76vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

<!DOCTYPE html>

<head>
  <title> GameDog | Video games info </title>

  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">

</head>

<body>
  <section class="page">
    <nav>
      <div class="logo">
        <img src="gamedoglogo.png">
        <p> <b> GameDog </b> </p>
      </div>

      <div>
        <ul>
          <li>
            <div class="toggle"></div>
          </li>
          <li id="aboutme"><a href="aboutme.html">About me</a></li>
          <li id="news">
            <a href="news.html">News about ↓</a>
            <ul>
              <li> <a href="fortnite.html">Fortnite</a></li>
              <li> <a href="rl.html">Rocket League</a></li>
              <li> <a href="lol.html">League of Legends</a></li>
              <li> <a href="cs.html">CS:GO</a></li>
            </ul>
          </li>
          <li id="main"><a href="main.html">Home</a></li>
        </ul>
      </div>

    </nav>

    <h1 class="topic"> Home Page </h1>

    <div class="card-info">
      <h3> Hey Gamers, </h3>
      <br>
      <h4> welcome to the site. Here you can find the latest news about your favourite games. We provide information about the current updates, changes and improvements. Here, in the site, you can also find the patch notes for the last update of your favourite
        games. Explore by clicking the button below or the News section above.</h4>
    </div>

    <div class="button">
      <a href="news.html"> Explore </a>
    </div>

    <div class="social">
      <ul>
        <li>
          <a href="https://www.facebook.com/LachezarValev"> <img src="facebook%20white.png" , id="facebook-main"></a>
        </li>
        <li>
          <a href="https://www.instagram.com/_lachovalev_/"> <img src="Black-icon-Instagram-logo-transparent-PNG.png" , id="instagram-main"></a>
        </li>
        <li>
          <a href="https://twitter.com/LachezarValev"> <img src="Black-icon-Twitter-logo-transparent-PNG.png" , id="twitter-main"></a>
        </li>
      </ul>
    </div>

    <div class="translate-1">
      <div id="google_translate_element"></div>
      <span>
                    <script type="text/javascript">
                    function googleTranslateElementInit() {
                        new google.translate.TranslateElement({
                        pageLanguage: 'en', includedLanguages: 'de,it,fr,ru,tr,bg', autoDisplay: false,
                        layout: google.translate.TranslateElement.InlineLayout.SIMPLE
                        }, 'google_translate_element');
                    }
                    </script>
                    <script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
                </span>
    </div>

  </section>



  <div class="menu">
    <ul>
      <li> <a href="main.html"> Home </a></li>
      <li> <a href="news.html"> News </a></li>
      <li> <a href="aboutme.html"> About me </a></li>
    </ul>

    <div class="social-menu">
      <ul>
        <li>
          <a href="https://www.facebook.com/LachezarValev"> <img src="toppng.com-facebook-black-white-icon-facebook-face-book-png-facebook-icon-for-footer-473x473.png" , id="facebook-menu"></a>
        </li>
        <li>
          <a href="https://www.instagram.com/_lachovalev_/"> <img src="Black-icon-Instagram-logo-transparent-PNG.png" , id="instagram-menu"></a>
        </li>
        <li>
          <a href="https://twitter.com/LachezarValev"> <img src="Black-icon-Twitter-logo-transparent-PNG.png" , id="twitter-menu"></a>
        </li>
      </ul>
    </div>

  </div>

  <script>
    const menuToggle = document.querySelector('.toggle')
    const page = document.querySelector('.page')

    menuToggle.addEventListener('click', function() {
      menuToggle.classList.toggle('active')
      page.classList.toggle('active')
    })
  </script>

  <script>
    window.addEventListener("scroll", function() {
      var navbar = document.querySelector("nav");
      var menu = document.querySelector(".menu");
      navbar.classList.toggle("sticky", window.scrollY > 0);
      menu.classList.toggle("sticky", window.scrollY > 0);
    })
  </script>

</body>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72288833

复制

相似问题

问谷歌翻译按钮，禁用一些链接
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问谷歌翻译按钮，禁用一些链接EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问谷歌翻译按钮，禁用一些链接
EN