Question

我的光标不会更改为手形光标，而是更改为文本光标。当我将鼠标悬停在导航栏中的每个项目上时，过渡动画无法播放。我只分配了一个指向导航“主页”的链接，看看是否需要我链接。我使用google.com作为导航栏中“主页”的链接。

body {
   margin: 0;
   background: #222;
   font-family: 'Work Sans', sans-serif;
   font-weight: 400;
}

.container {
     width: 80%;
     margin: 0 auto;
}

header {
  background: #247DAA;
}

header::after {
  content: '';
  display: table;
  clear: both;
}

.logo {
  float: left;
  padding: 10px 0;
}

nav {
  float: right;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
  margin-left: 70px;
  padding-top: 23px;

  position: relative;
}

nav a {
  color: #444;
  text-decoration: none;
  font-size: 14px;
}

nav a:hover {
  color: #000;
}

nav a::before {
  content: '';
  display: block;
  height: 5px;
  background-color: #444;

  position: absolute;
  top: 0;
  width: 0%;

  transition: all ease-in-out 250ms;
}

nav a:hover::before {
  width: 100%;
}

<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
<link href="styles.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
<title>Website</title>
</head>
<body>
<header>
  <div class="container">

    <h1 class="logo"></h1>

    <nav>
      <ul>
        <li><a href="https://www.google.com"></a>Home</li>
        <li><a href="#"></a>About</li>
        <li><a href="#"></a>News</li>
        <li><a href="#"></a>Gallery</li>
        <li><a href="#"></a>Contact</li>
      </ul>
    </nav>

  </div>
</header>

</body>
</html>

Answer 1

您的菜单文字位于li标记内，因此当您尝试点击菜单时，您点击了li（锚点）标记上的<a>。< / p>

解决方案

只需将您的文字放在<a>（锚）标记

中

例如： - <a href="">Your text should be here</a>

＆＃13;

body {
   margin: 0;
   background: #222;
   font-family: 'Work Sans', sans-serif;
   font-weight: 400;
}

.container {
     width: 80%;
     margin: 0 auto;
}

header {
  background: #247DAA;
}

header::after {
  content: '';
  display: table;
  clear: both;
}

.logo {
  float: left;
  padding: 10px 0;
}

nav {
  float: right;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
  margin-left: 70px;
  padding-top: 23px;

  position: relative;
}

nav a {
  color: #444;
  text-decoration: none;
  font-size: 14px;
}

nav a:hover {
  color: #000;
}

nav a::before {
  content: '';
  display: block;
  height: 5px;
  background-color: #444;

  position: absolute;
  top: 0;
  width: 0%;

  transition: all ease-in-out 250ms;
}

nav a:hover::before {
  width: 100%;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
<link href="styles.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
<title>Website</title>
</head>
<body>
<header>
  <div class="container">

    <h1 class="logo"></h1>

    <nav>
      <ul>
        <li><a href="https://www.google.com">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

  </div>
</header>

</body>
</html>

＆＃13;

其他解决方案：

使用您希望在没有cursor:pointer标记

的元素上实现的css <a>

为什么我不能点击我网站上的导航栏项目？

1 个答案: