html - 不能在 NAV 上使用图像作为链接

问题描述

伟大的，

我一直在研究一个显示奇怪行为的导航，由于某种原因，我无法单击我的徽标（图像）以链接到另一个页面。但是，当我将鼠标放在图像上时，我实际上可以拖动图像，所以我想它与 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;
  }

}

标签： htmlcss

html - 不能在 NAV 上使用图像作为链接

问题描述

解决方案

推荐阅读