Html Question posted in
Some basic documentation can be found here.

Html – Is there an error in my codes, my CSS hover effect isn't working in my browser display

I tried the codes, but it’s not showing me the display I want.

@font-face {
  font-family: 'AlfaSlabOne-Regular';
  src: url('AlfaSlabOne-Regular.ttf');
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

.container {
  height: 100vh;
  display: grid;
  place-items: center;
  background-color: rgb(44, 44, 63);
}

.navbar {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.nav-video {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  object-position: center;
  opacity: 0.2;
  z-index: -1;
}

.navbar-img {
  width: 50%;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  opacity: 0.2;
  transition: transform 1.5s;
}

.nav-link {
  font-family: 'AlfaSlabOne-Regular';
  font-size: clamp(3.5rem, 10cqi, 10rem);
  text-decoration: none;
  display: block;
  letter-spacing: 0.2rem;
  margin: 1rem 0;
}

.nav-link:hover {
  transform: translateX(-2rem);
  transition: transform 0.3s;
}

.nav-link span {
  text-transform: uppercase;
  display: inline-block;
  color: #fff;
  transform: translateX(0);
  transition: color 0.5s, transform 0.5s;
}

.nav-link :hover span {
  color: #ebe8c8;
  transform: translateX(2rem);
  transition-delay: calc(var (--i) + 0.2s);
}

@keyframes letterAnim {
  0% {
    transform: translate(0, 0);
    color: #fff;
  }
  50% {
    color: #E6A570;
    JAVASCRIPT: const links=[...document.querySelectorAll(".nav-link")] const navText=['About',
    'Clients',
    'Portfolio',
    'Careers',
    'Fun'] links.forEach((link, i)=> {
      navText[i].split('').forEach((letter, j)=> {
        const span=document.createElement('span') span.textContent=letter span.style.cssText=`--i: .$ {
          j
        }
        s` link.append(span)
      }
      )
    }
    ) P:S use any video or image of your choice. I just wanted the navigation to change color whenever I put my keyboard mouse on it.
  }
  100% {
    transform: translate(2rem, 0);
    color: #ebe8c8;
  }
}
<div class="container">
  <div class="navbar">
    <video src="video-1.mp4" autoplay loop muted class="nav-video"></video>
    <img src="img.png" class="navbar-img">
    <nav class="nav">
      <a href="#" class="nav-link">Link 1</a>
      <a href="#" class="nav-link">Link 2</a>
      <a href="#" class="nav-link">Link 3</a>
      <a href="#" class="nav-link">Link 4</a>
      <a href="#" class="nav-link">Link 5</a>
    </nav>
  </div>
</div>
Tags:

2

Answers


  1. 0

    From what I can see, the main issue is that the image (being positioned absolutely) appears in front of the links and therefore the links are not hoverable. Styling the image with z-index: -1 resolves that.

    const links = document.querySelectorAll('nav a')
const navText = ['About', 'Clients' , 'Portfolio', 'Careers' , 'Fun']

for (let i = 0; i < links.length; i++) {
  links[i].innerHTML = navText[i]
}
    body {
  margin: 0;
}

.navbar {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.navbar img {
  position: absolute;
  top: 50%;
  width: 50%;
  transform: translateY(-50%);
  opacity: 0.5;
  z-index: -1; /* moves it behind the links so that the links will be hoverable */
}

nav a {
  font-size: clamp(3.5rem, 10cqi, 10rem);
  text-decoration: none;
  display: block;
  letter-spacing: 0.2rem;
  margin: 1rem 0;
  color: white;
  transition: 0.5s;
}

nav a:hover {
  transform: translateX(-1rem);
  color: pink;
}
    <div class="navbar">
  <img src="https://picsum.photos/id/650/375/750">
  <nav>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
  </nav>
</div>
    Login or Signup to reply.
  2. 0

    To begin with, there are quite a few issues with code.

    First of all, there is a very much ambiguity here. Therefore, from the code, my conclusion about your expected result is a working letterAnim.

    The first and foremost issue is that it’s not even called, anywhere. Let’s fix that by updating .nav-link:hover

    .nav-link:hover {
    /* We don't need these unless an initial
       right shift is required */
 
    /* transform: translateX(-2rem);
       transition: transform 0.3s; */

    /* This adds letterAnim, which will be run once
       nav-link is hovered */
    animation: 700ms ease-in letterAnim forwards;
}

    Not much has changed. That’s because the way you have set up your JS is faulty. Either write each statement on a new line or add a breakpoint with ; after each statement. cssText also has extra spaces. With a bit more of fixing and formatting, we have this.

    const links = [...document.querySelectorAll(".nav-link")];
const navText = ["About", "Clients", "Portfolio", "Careers", "Fun"];

links.forEach((link, i) => {
  link.innerHTML = "";
  navText[i].split("").forEach((letter, j) => {
    const span = document.createElement("span");
    span.textContent = letter;
    span.style.cssText = `--i: .${j}s`;
    link.append(span);
  });
});

    and now we have a beautiful wavy text animation.

    const links = [...document.querySelectorAll(".nav-link")];
const navText = ["About", "Clients", "Portfolio", "Careers", "Fun"];

links.forEach((link, i) => {
  link.innerHTML = "";
  navText[i].split("").forEach((letter, j) => {
    const span = document.createElement("span");
    span.textContent = letter;
    span.style.cssText = `--i: .${j}s`;
    link.append(span);
  });
});
    @font-face {
  font-family: "AlfaSlabOne-Regular";
  src: url("AlfaSlabOne-Regular.ttf");
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

.container {
  height: 100vh;
  display: grid;
  place-items: center;
  background-color: rgb(44, 44, 63);
}

.navbar {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.nav-video {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  object-position: center;
  opacity: 0.2;
  z-index: -1;
}

.navbar-img {
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  opacity: 0.2;
  transition: transform 1.5s;
  z-index: -1;
  object-fit: cover;
}

.nav-link {
  font-family: "AlfaSlabOne-Regular";
  font-size: clamp(3.5rem, 10cqi, 10rem);
  text-decoration: none;
  display: block;
  letter-spacing: 0.2rem;
  margin: 1rem 0;
}

.nav-link:hover {
  /* transform: translateX(-2rem);
  transition: transform 0.3s; */
  animation: 700ms ease-in letterAnim forwards;
}

.nav-link span {
  text-transform: uppercase;
  display: inline-block;
  color: #fff;
  transform: translateX(0);
  transition: color 0.5s, transform 0.5s;
}

.nav-link:hover span {
  color: #ebe8c8;
  transform: translateX(2rem);
  transition-delay: calc(var(--i) + 0.2s);
}

@keyframes letterAnim {
  0% {
    transform: translate(0, 0);
    color: #fff;
  }
  50% {
    color: #e6a570;
  }
  100% {
    transform: translate(2rem, 0);
    color: #ebe8c8;
  }
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>HTML + CSS</title>
  <link rel="stylesheet" href="styles.css" />
</head>

<body>
  <div class="container">
    <div class="navbar">
      <video src="video-1.mp4" autoplay loop muted class="nav-video"></video>
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw7OZZ8Gb4mj2dovNLtuCuqHJ96rc2GYuDu7K58fCgNIgzjOsc5Fe6yYmmv90jqkKw3P4uLKUXUIaFZY8YToKVjHuteTpI4wBWO4wlB9Br57tcC_nef4IdDXR20svnFm03ZVs9712JnRTq9k9XigARaJI8umKV00nr2G5iLXpmk3y8L_1EXyhQbUuJwA/s1600/beautiful-cloudy-landscape-132023-thumb.webp"
        class="navbar-img" />
      <nav class="nav">
        <a href="#" class="nav-link">Link 1</a>
        <a href="#" class="nav-link">Link 2</a>
        <a href="#" class="nav-link">Link 3</a>
        <a href="#" class="nav-link">Link 4</a>
        <a href="#" class="nav-link">Link 5</a>
      </nav>
    </div>
  </div>
  <script src="./index.js"></script>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search