Question

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

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

＆＃13;

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;
}

＆＃13;

<?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>

＆＃13;

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>

＆＃39;点击＆＃39;光标出现在网页上的div上？

2 个答案: