时间戳

首页 > 解决方案 > 标题中没有响应的 Href 和按钮

html - 标题中没有响应的 Href 和按钮

问题描述

我正在制作一个 django 项目，在添加标题后，当我尝试添加可点击按钮或指向它的链接时，它没有响应。我已将我网站上的其他按钮粘贴到标题上，我的标题代码似乎有问题，或者我没有添加任何内容。我的导航栏工作得很好。

.header-container {
  width: 100%;
  height: 900px;
  border-left: none;
  border-right: none;
  position: relative;
  padding: 20px;
}

.video-container {
  position: absolute;
  top: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

video {
  position: absolute;
  z-index: -1;
  opacity: 0.78;
  width: 100%;
}

.head-section {
  z-index: 1;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
  margin-top: 15%;
  width: 700px;
}

.head-title {
  color: white;
  letter-spacing: 3px;
  font-size: 50px;
  font-family: "Josefin Sans", sans-serif;
}

.btn1 {
  border-radius: 50%;
}

.button {
  z-index: 1;
  padding: 0.5em 10em;
  text-decoration: none;
  color: white;
  border: double 4px white;
  border-radius: 3px;
  transition: .4s;
  cursor: pointer;
}

.button:hover {
  background: white;
  opacity: 50%;
}

.button {
  padding: 0.5em 10em;
  text-decoration: none;
  color: white;
  border: double 4px white;
  border-radius: 3px;
  transition: .4s;
}
<div class="header-container">
  <div class="video-container">
    <video preload="true" autoplay="autoplay" loop="loop" muted="muted">
                    <source src="https://d9nqqwcssctr8.cloudfront.net/wp-content/uploads/2020/03/26054225/VS20-DotCom-Header.mp4.mp4" type="video/mp4"/>
                        <source src="https://d9nqqwcssctr8.cloudfront.net/wp-content/uploads/2020/03/26054238/VS20-DotCom-Header.webmhd.webm" type="video/webm"/>
                            
    
                </video>
  </div>
  <div class="head-section">
    <h2 class="head-title">Ejad worship</h2>
    <a href="#" class="button btn1">Get to Know us better!</a>
  </div>
</div>

标签： htmlcssdjangoheader

解决方案

穿上z-index: -1;_.video-container

.header-container {
  width: 100%;
  height: 900px;
  border-left: none;
  border-right: none;
  position: relative;
  padding: 20px;
}

.video-container {
  position: absolute;
  top: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
  overflow: hidden;
  z-index: -1;
}

video {
  position: absolute;
  z-index: -1;
  opacity: 0.78;
  width: 100%;
}

.head-section {
  z-index: 1;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
  margin-top: 15%;
  width: 700px;
}

.head-title {
  color: white;
  letter-spacing: 3px;
  font-size: 50px;
  font-family: "Josefin Sans", sans-serif;
}

.btn1 {
  border-radius: 50%;
}

.button {
  z-index: 1;
  padding: 0.5em 10em;
  text-decoration: none;
  color: white;
  border: double 4px white;
  border-radius: 3px;
  transition: .4s;
  cursor: pointer;
}

.button:hover {
  background: white;
  opacity: 50%;
}

.button {
  padding: 0.5em 10em;
  text-decoration: none;
  color: white;
  border: double 4px white;
  border-radius: 3px;
  transition: .4s;
}
<div class="header-container">
  <div class="video-container">
    <video preload="true" autoplay="autoplay" loop="loop" muted="muted">
                    <source src="https://d9nqqwcssctr8.cloudfront.net/wp-content/uploads/2020/03/26054225/VS20-DotCom-Header.mp4.mp4" type="video/mp4"/>
                        <source src="https://d9nqqwcssctr8.cloudfront.net/wp-content/uploads/2020/03/26054238/VS20-DotCom-Header.webmhd.webm" type="video/webm"/>
                            
    
                </video>
  </div>
  <div class="head-section">
    <h2 class="head-title">Ejad worship</h2>
    <a href="#" class="button btn1">Get to Know us better!</a>
  </div>
</div>

推荐阅读