<a> tags not working and responding to hover effects-CodePudding

I am trying to make a web page that has a top navigation panel and a image slider at the bottom. The image slider works fine. but the navigation panel doesnt respond to clicks or hover effects.

body {
  margin: 0px;
  padding: 10px;
  background-color: #ccc9c9;
}

header{
  width: 100%;
  height: 70px;
  background-color: #282828;
}
h1{
  position: absolute;
  padding: 3px;
  float: left;
  margin-left: 2%;
  margin-top: 10px;
  font-family: Calibri;
  color: #39ca74;
}
span{
  color: #ffffff
}
nav-btn a:hover{
  text-decoration:underline;
}

li{
  display: inline-block;
  padding: 15px 30px;
}
a {
  width: auto;
  float: right;
  margin-top: 8px;
  text-decoration:underline;
  text-align: center;
  color:#ffffff
}
.box {
  width: 300px;
  box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  overflow: hidden;
  margin: 25px;
}
.slide-img {
  height: 350px;
  position: relative;
}
.slide-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.detail-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  box-sizing: border-box;
  font-family: calibri;
}
.type {
  display: flex;
  flex-direction: column;
}
.type a {
  color: #222222;
  margin: 5px 0px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding-right: 8px;
}
.type span {
  color: rgba(26, 26, 26, 0.5);
}
.quantity {
  color: #333333;
  font-weight: 600;
  font-size: 1.1rem;
  font-family: poppins;
  letter-spacing: 0.5px;
}
.overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color: rgb(190, 204, 191, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
}
.details-btn {
  width: 160px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  color: #252525;
  font-weight: 700;
  letter-spacing: 1px;
  font-family: calibri;
  border-radius: 20px;
  box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.2);
}
.details-btn:hover {
  color: #ffffff;
  background-color: #288a40;
  transition: all ease 0.3s;
}
.slide-img:hover .overlay {
  visibility: visible;
  animation: fade 0.5s;
}
@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.slider {
  width: 50%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translate(50%);
}

<header>
  <nav>
    <ul >
      <li><a href="templates/index.html" ></a>Home</li>
      <li><a href="templates/index.html" ></a>Items</li>
      <li><a href="templates/index.html" ></a>Browse</li>
      <li><a href="templates/index.html" ></a>Add Items</li>
      <li><a href="templates/index.html" ></a>Logout</li>
      <li><input type="submit" value="Go to Google" />Logout</button></li>
    </ul>
  </nav>
</header>
<body>
  <section >
    <ul id="autoWidth" >
        <li >
            <div >
                <div >
                  <img src="static/images/1.webp" alt="1" />
                  <div >
                    <a href="#" >View Details</a>
                  </div>
                </div>
          
                <div >
                  <div >
                    <a href="#">Camera & Camcorders</a>
                    <span>Available Units: </span>
                  </div>
                  <a href="#" > 0 </a>
                </div>
              </div>
        </li>
       </ul>
 </body>

Result: Above code is the partial code for the html code I am using and the css is code is the complete one. As you can see, the hovering would effect it at all and they dont respond to clicks either

CodePudding user response：

nav-btn a:hover{
  text-decoration:underline;
}

looks like you've left out the . on the nav-btn class.

it should be

.nav-btn a:hover{
  text-decoration:underline;
}

CodePudding user response：

Maybe you can try this code, make sure you run in full screen

body {
    margin: 0px;
    padding: 10px;
    background-color: #ccc9c9;
  }
  
header{
  width: 100%;
  height: 70px;
  background-color: #282828;
}
h1{
  position: absolute;
  padding: 3px;
  float: left;
  margin-left: 2%;
  margin-top: 10px;
  font-family: Calibri;
  color: #39ca74;
}
span{
  color: #ffffff
}

.nav-btn {
  text-decoration: none;
}

.nav-btn:hover{
  text-decoration:underline;
}

li{
  display: inline-block;
  padding: 15px 30px;
}
a {
  width: auto;
  float: right;
  margin-top: 8px;
  text-decoration:underline;
  text-align: center;
  color:#ffffff
}
.box {
  width: 300px;
  box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  overflow: hidden;
  margin: 25px;
}
.slide-img {
  height: 350px;
  position: relative;
}
.slide-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.detail-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  box-sizing: border-box;
  font-family: calibri;
}
.type {
  display: flex;
  flex-direction: column;
}
.type a {
  color: #222222;
  margin: 5px 0px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding-right: 8px;
}
.type span {
  color: rgba(26, 26, 26, 0.5);
}
.quantity {
  color: #333333;
  font-weight: 600;
  font-size: 1.1rem;
  font-family: poppins;
  letter-spacing: 0.5px;
}
.overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color: rgb(190, 204, 191, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
}
.details-btn {
  width: 160px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  color: #252525;
  font-weight: 700;
  letter-spacing: 1px;
  font-family: calibri;
  border-radius: 20px;
  box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.2);
}
.details-btn:hover {
  color: #ffffff;
  background-color: #288a40;
  transition: all ease 0.3s;
}
.slide-img:hover .overlay {
  visibility: visible;
  animation: fade 0.5s;
}
@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.slider {
  width: 50%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translate(50%);
}

<header>
  <nav>
     <ul >
        <li><a  href="#">Home</a></li>
        <li><a  href="#">Items</a></li>
        <li><a  href="#">Browse</a></li>
       <li><a  href="#">Add Items</a></li>
        <li><a  href="#">Logout</a></li>
     </ul>
</nav>
</header>
<body>
  <section >
    <ul id="autoWidth" >
        <li >
            <div >
                <div >
                  <img src="static/images/1.webp" alt="1" />
                  <div >
                    <a href="#" >View Details</a>
                  </div>
                </div>
          
                <div >
                  <div >
                    <a href="#">Camera & Camcorders</a>
                    <span>Available Units: </span>
                  </div>
                  <a href="#" > 0 </a>
                </div>
              </div>
        </li>
       </ul>
 </body>