'Click' 光标出现在网页上的 div 上？

Question

我有一个小而奇怪的问题，我无法解决。每当我将光标移到网页上的 div 上时，它们就会变得可点击，这是我不想要的，因为它会影响网页上的其他内容，例如 Web 表单等不可用。我发现这是导航栏和 div 之间无法很好交互的问题，因为当我删除其中任何一个时，网页会按预期工作（基本上 'click' 光标不会出现在它不应该出现的地方，这就是我想要的）。但是，我同时需要它们，任何人都可以通过快速查看我的代码来提出修复建议吗？谢谢:)

我的小html和css页面的代码如下：

body {
  /*This applies to the body element of the html page as a whole*/
  margin: 0;
  /*I don't want specific margin or padding for the web page*/
  padding: 0;
}
#header {
  height: 8em;
  padding: 0;
  background-color: black;
  width: 100%;
  /*solid thick creates a border around top of header*/
}
#header p {
  margin-left: 500px;
  /*puts a 500px space between the text and left margin*/
  color: black;
  font-family: 'Dancing Script', Georgia, Times, serif;
  font-size: 58px;
  margin-top: 0px;
}
#topgraphic {
  width: 100%;
  padding: 0;
  background-color: blue;
  height: 20em;
}
#bottomleft {
  width: 50%;
  padding: 0;
  background-color: red;
  height: 21.6em;
  position: relative;
  float: left;
}
#bottomright {
  width: 50%;
  padding: 0;
  background-color: green;
  height: 21.6em;
  position: relative;
  float: right;
}
.nav {
  border-width: 1px 0;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
  background: none;
  padding-top: 50px;
  padding-left: 600px;
  position: fixed;
}
.nav li {
  display: inline;
  padding-right: 50px;
}
.nav a {
  color: white;
  font-size: 25px;
  font-family: 'Josefin Sans', Helvetica, Arial, sans-serif;
  text-decoration: none;
}
.nav li:hover {
  background: none;
  border-radius: none;
}
.nav li:hover a {
  color: white;
}

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title>Home Page</title>
  <link href="ceredigioncss.css" type="text/css" rel="stylesheet" />
  <!--style sheet containing formatting-->
  <link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css' />
  <link href='http://fonts.googleapis.com/css?family=Josefin+Sans' rel='stylesheet' type='text/css' />
  <link href='http://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css'>


</head>

<body>
  <div id="header">
    <ul class="nav">
      <li>
        <a href="index.html" />Home
      </li>
      <li><a href="submitrequest.html" />Submit a request</li>
      <li><a href=" " />Our plumbers</li>
      <li><a href="login.html" />Login</li>
      <li><a href=" " />Edit profile</li>
      <li><a href=" " />Request hub</li>
      <li><a href=" " />Admin</li>
    </ul>
  </div>

  <div id="topgraphic">

  </div>

  <div id="bottomleft">

  </div>

  <div id="bottomright">
  </div>


</body>

</html>

Answer 1

这种效果是因为您的 divs 是锚点的子级，这使得它们的行为就像锚点本身。发生这种情况是因为您忘记关闭锚标签：

<li><a href="submitrequest.html" />Submit a request</li>
<li><a href=" " />Our plumbers</li>
<li><a href="login.html" />Login</li>
<li><a href=" " />Edit profile</li>
<li><a href=" " />Request hub</li>
<li><a href=" " />Admin</li>

添加 </a> 以关闭您的锚点。

Answer 2

你错过了结束标签尝试完成它

<ul class="nav">
      <li>
          <a href="index.html">Home</a>
      </li>
        <li><a href="submitrequest.html">Submit a request</a></li>
        <li><a href=" " >Our plumbers</a></li>
        <li><a href="login.html" >Login</a></li>
        <li><a href=" " >Edit profile</a></li>
        <li><a href=" " >Request hub</a></li>
        <li><a href=" " >Admin</a></li>
    </ul>

'Click' 光标出现在网页上的 div 上？

'Click' cursor is appearing over divs on webpage?

html

css

cursor