Html Can'；t使用图像作为导航上的链接
格雷廷斯 我一直在制作一个导航，它显示了一种奇怪的行为，出于某种原因，我无法点击我的徽标（图像）将其链接到另一个页面。然而，当我把鼠标放在图像上时，我实际上可以拖动它，所以我想它与Z-index没有任何关系 如果有人能帮我，那就太好了，我已经为此苦苦挣扎了好几天了Html Can'；t使用图像作为导航上的链接,html,css,Html,Css,格雷廷斯 我一直在制作一个导航，它显示了一种奇怪的行为，出于某种原因，我无法点击我的徽标（图像）将其链接到另一个页面。然而，当我把鼠标放在图像上时，我实际上可以拖动它，所以我想它与Z-index没有任何关系 如果有人能帮我，那就太好了，我已经为此苦苦挣扎了好几天了 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" c
<!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;
您应该在图像周围使用锚定标记来创建“可单击”图像
<a href="www.google.com"><img src="images/logo_multimedia_house.png"></a>
我希望它能为你工作 提供链接。您的代码在哪里？在没有代码的情况下我们应该如何检查..寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现它所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。看：。我知道，这是我所做的，但天哪，它不起作用。。。这就好像它没有被验证或者是出于某种原因……你的例子说，
refhref<a href="www.google.com"><img src="images/logo_multimedia_house.png"></a>