Question

大事

我一直在研究显示奇怪行为的导航仪，由于某种原因，我无法单击其徽标（图像）以使其链接到另一页。但是，当我按住鼠标时，实际上可以拖动图像，因此我认为它与Z-index无关。

如果有人能帮助我，那太好了，我已经为此苦苦挣扎了几天。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Responsive Sticky Navbar</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font- 
  awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
 <body>
  <div class="wrapper">
        <header>

              <nav>

                    <div class="menu-icon">
                          <i class="fa fa-bars fa-2x"></i>
                    </div>

                    <div class="logo">
                          <a ref="#"><img src="logo.png" style="width: 
                          100px"></a>
                    </div>

                    <div class="menu">
                          <ul>
                                <li><a href="#">Home</a></li>
                                <li><a href="#">About</a></li>
                                <li><a href="#">Blog</a></li>
                                <li><a href="#">Contact</a></li>
                          </ul>
                    </div>
              </nav>

        </header>

        <div class="content">
              <p>
                    Lorem Ipsum is simply dummy text of the printing and 
                    typesetting industry. Lorem Ipsum has been the industry's 
                    standard dummy text ever since the 1500s, when an unknown 
                    printer took a galley of type and scrambled it to make a 
                    type specimen book. It has survived not only five 
                    centuries, but also the leap into electronic typesetting, 
                    remaining essentially unchanged. It was popularised in 
                    the 1960s with the release of Letraset sheets containing 
                    Lorem Ipsum passages, and more recently with desktop 
                   publishing software like 
                    Aldus PageMaker including versions of Lorem Ipsum.
              </p>
        </div>
  </div>

  <script type="text/javascript">

  // Menu-toggle button

  $(document).ready(function() {
        $(".menu-icon").on("click", function() {
              $("nav ul").toggleClass("showing");
        });
  });

  // Scrolling Effect

  $(window).on("scroll", function() {
        if($(window).scrollTop()) {
              $('nav').addClass('black');
        }

        else {
              $('nav').removeClass('black');
        }
  })


  </script>

</body>
</html>


  html, body {
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  font-family: "Helvetica Neue",sans-serif;
  font-weight: lighter;
}

header {
  width: 100%;
  height: 100vh;
  background: url('http://res.cloudinary.com/dbssny2ox/image/upload/v1527845599/hero_yankaq.jpg') no-repeat 50% 50%;
  background-size: cover;
}

.content {
  width: 94%;
  margin: 4em auto;
  font-size: 20px;
  line-height: 30px;
  text-align: justify;
}

.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 13px 46px;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}

nav {
  position: fixed;
  width: 100%;
  line-height: 60px;
}

nav ul {
  line-height: 60px;
  list-style: none;
  background: rgba(0, 0, 0, 0);
  overflow: hidden;
  color: #fff;
  padding: 0;
  text-align: right;
  margin: 0;
  padding-right: 40px;
  transition: 1s;
}

nav.black ul {
  background: #000;
}

nav ul li {
  display: inline-block;
  padding: 16px 40px;;
}

nav ul li a {
  text-decoration: none;
  color: #fff;
  font-size: 16px;

}

.menu-icon {
  line-height: 60px;
  width: 100%;
  background: #000;
  text-align: right;
  box-sizing: border-box;
  padding: 15px 24px;
  cursor: pointer;
  color: #fff;
  display: none;
}

 @media(max-width: 786px) {

  .logo {
        position: fixed;
        top: 0;
        margin-top: 16px;
  }

  nav ul {
        max-height: 0px;
        background: #000;
  }

  nav.black ul {
        background: #000;
  }

  .showing {
        max-height: 34em;
  }

  nav ul li {
        box-sizing: border-box;
        width: 100%;
        padding: 24px;
        text-align: center;
  }

  .menu-icon {
        display: block;
  }

}

Answer 1

您应该在图片周围使用锚标记来创建“可点击”图片。

    <a href="#mylink" title="Logo"><img src="https://www.placecage.com/gif/284/196" alt="Logo"/></a>

拖动是一种浏览器功能，例如，通过将图像从浏览器窗口拖动到桌面上，可以将图像保存到计算机。

Answer 2

我认为您指的是下方的笔和突出显示的徽标图像 https://codepen.io/wristcutter69/pen/zZNqpo

您在此处链接不在徽标图像上的标签。链接起来应该是这样的。

<a href="www.google.com"><img src="images/logo_multimedia_house.png"></a>

我希望对您有用。

不能将图像用作导航上的链接

2 个答案: