无法选择或点击<a> tags

时间：2018-01-14 00:38:15

标签： html css hyperlink header paragraph

I have coded my navigation bar however my links are not clickable nor am I able to highlight the text. I am not sure why... I have put them onto <a> tags and added href="#" but it still isn't clickable. I was maybe wondering if it was the display: # or position: # I have added in styling that may have caused this? I mean on my footer the a tag seems to be working perfectly.

Could someone have a look and see if you see anything unusual that I may of missed

body{
    margin: 0;
    border: 0;
    padding: 0;
}
/* Navigation */
.header{
    width: 100vw;
    height: 6vh;
    background: #111111;
    display: flex;
    align-items: center;
    justify-content: center;
}
.header div{
    flex: 1;
}
.header-logo{
    padding-left: 5vw;
}
#header-logo{
    height: 4vh;
}
.header-nav{
    text-align: right;
}
.nav-container{
    padding-right: 5vw;
}
.nav-list1{
    font-family: Oswald;
    font-weight: 500;
    font-size: 1em;
    display: initial;
    padding: 0.25vh 1.25vw;
}
.nav-list2{
    font-family: Oswald;
    font-weight: 500;
    font-size: 1em;
    display: initial;
    border-style: solid;
    border-width: 5px;
    padding: 0.25vh 1vw;
    border-image: linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
    -moz-border-image: -moz-linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
    -webkit-border-image: -webkit-linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
    border-image-slice: 1;
}
.nav-list2:hover{
    background: linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
}
/* End Navigation */

/* Slideshow */
.section1{
    background: url(files/home-slideshow-001.jpeg);
    height: 94vh;
    background-size: cover;
}
#overlay{
    font-family: Oswald;
    text-transform: uppercase;
    font-size: 3vw;
    font-weight: 700;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* End Slideshow */
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Home</title>
        <link rel="stylesheet" href="style.css">
        <link href="https://fonts.googleapis.com/css?family=Oswald:400,500,600,700" rel="stylesheet">
    </head>
    <body>
        <div class="header">
            <div class="header-logo">
                <a href="http://www.#.com">
                    <img id="header-logo" src="files/w-logo.png">
                </a>
            </div>
            <div class="header-nav">
                <span class="nav-container">
                    <a class="nav-list1" href="http://www.#.com/home">Home</a>
                    <a class="nav-list1" href="http://www.#.com/home">About</a>
                    <a class="nav-list1" href="http://www.#.com/home">Services</a>
                    <a class="nav-list2" href="http://www.#.com/home">Contact</a>
                </span>
            </div>
        </div>
        <div class="section1">
            <div id="overlay">
                <h1>header</h1>
            </div>
        </div>

6 个答案:

答案 0 :(得分：0)

您#overlay正在覆盖您的网页，因此您无法在其下方点击。

答案 1 :(得分：0)

你有一个带有id＆＃34; overlay＆＃34;的div这可以防止点击进入链接。它基本上可以保护底层网页免受点击。

您可以通过删除叠加层或降低叠加层来解决此问题，以使其上方的点击事件仍然有效。您可以通过向＆＃34; overlay＆＃34;添加一些空间来实现此目的。 css＆＃34; top＆＃34;属性。

答案 2 :(得分：0)

#overlay元素绝对定位并且从普通文档流中取出，这会导致元素“位于”{{1元素，导致观察到的行为。

通过在.header上声明值为position的{​​{1}}属性来创建新的堆叠上下文，以便relative属性具有可以声明.header以外的值，例如：

z-index

代码段示范： 

auto
.header{
    width: 100vw;
    height: 6vh;
    background: #111111;
    display: flex;
    align-items: center;
    justify-content: center;
    /* additional */
    position: relative; /* required to declare a z-index property */
    z-index: 1;
}

答案 3 :(得分：0)

如果你想做navegation吧，你应该把它做成＆lt;导航＆gt;标签和它们是这样的：

    <nav class="header-nav">
            <div class="nav-container">
                <a class="nav-list1" href="http://www.#.com/home">Home</a>
                <a class="nav-list1" href="http://www.#.com/home">About</a>
                <a class="nav-list1" href="http://www.#.com/home">Services</a>
                <a class="nav-list2" href="http://www.#.com/home">Contact</a>
            </div>
        </nav>

其他方面，您可以向导航栏添加z-index属性，以便始终保持其他功能。

答案 4 :(得分：0)

尝试附加的代码段，我在您的代码段中更改了以下内容。

#overlay {
 position: relative;
}

和

由于您要删除标记中突出显示的文字，您可以使用

text-decoration:none;


body {
  margin: 0;
  border: 0;
  padding: 0;
}


/* Navigation */

.header {
  width: 100vw;
  height: 6vh;
  background: #111111;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header div {
  flex: 1;
}

.header-logo {
  padding-left: 5vw;
}

#header-logo {
  height: 4vh;
}

.header-nav {
  text-align: right;
}

.nav-container {
  padding-right: 5vw;
}

.nav-list1 {
  font-family: Oswald;
  font-weight: 500;
  font-size: 1em;
  display: initial;
  padding: 0.25vh 1.25vw;
  text-decoration: none;
}

.nav-list2 {
  font-family: Oswald;
  font-weight: 500;
  font-size: 1em;
  display: initial;
  border-style: solid;
  border-width: 5px;
  padding: 0.25vh 1vw;
  border-image: linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
  -moz-border-image: -moz-linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
  -webkit-border-image: -webkit-linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
  border-image-slice: 1;
  text-decoration: none;
}

.nav-list2:hover {
  background: linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
}


/* End Navigation */


/* Slideshow */

.section1 {
  background: url(files/home-slideshow-001.jpeg);
  height: 94vh;
  background-size: cover;
}

#overlay {
  font-family: Oswald;
  text-transform: uppercase;
  font-size: 3vw;
  font-weight: 700;
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* End Slideshow */
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Home</title>
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Oswald:400,500,600,700" rel="stylesheet">
</head>

<body>
  <div class="header">
    <div class="header-logo">
      <a href="http://www.#.com">
        <img id="header-logo" src="files/w-logo.png">
      </a>
    </div>
    <div class="header-nav">
      <span class="nav-container">
                    <a class="nav-list1" href="http://www.#.com/home">Home</a>
                    <a class="nav-list1" href="http://www.#.com/home">About</a>
                    <a class="nav-list1" href="http://www.#.com/home">Services</a>
                    <a class="nav-list2" href="http://www.#.com/home">Contact</a>
                </span>
    </div>
  </div>
  <div class="section1">
    <div id="overlay">
      <h1>header</h1>
    </div>
  </div>

答案 5 :(得分：0)

<div id="overlay">覆盖了该页面，您需要设置z-index以确保它位于

下面
相关问题
最新问题