CSS not activated after reaching required screen width-CodePudding

* {
  margin: 0px;
  padding: 0px;
}
.nav-bar {
  display: flex;
}

.nav-left {
  display: flex;
  width: 50%;
  background: linear-gradient(
    180deg,
    black,
    darkslategray,
    gray,
    darkslategray
  );
  justify-content: space-evenly;
  align-items: center;
}
#nav-left-links {
  display: flex;
}

#nav-left-links a {
  font-family: "Oswald", sans-serif;
  margin: 0px 10px;
}

#nav-left-links > li {
  list-style: none;
}

#nav-left-links > li > a {
  text-decoration: none;
  color: ivory;
  font-size: 1em;
}

.nav-right {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(
    180deg,
    black,
    darkslategray,
    gray,
    darkslategray
  );
}

.dotaLogo {
  width: 90px;
  margin: 0px;
}

#socio-logo {
  padding: 0px 23px 0px;
  margin: 28px auto 0px;
}

ion-icon {
  width: 50px;
  height: 50px;
  color: ivory;
}

.rightNavImg {
  width: 360px;
  height: auto;
  margin: 10px 50px;
  display: block;
  border: 2px solid ivory;
}
@media screen and (min-width: 1024px) {
  .rightNavImg:hover {
    border: 2px solid gold;
  }
  ion-icon:hover {
    color: rgb(182, 29, 29);
  }
  .dotaLogo:hover {
    border: 8px solid gold;
  }
  .nav-right:hover {
    background: linear-gradient(
      180deg,
      black,
      rgb(17, 29, 29),
      rgb(40, 40, 40),
      rgb(17, 29, 29)
    );
  }
  .nav-left:hover {
    background: linear-gradient(
      180deg,
      black,
      rgb(17, 29, 29),
      rgb(40, 40, 40),
      rgb(17, 29, 29)
    );
  }
  #nav-left-links > li > a:hover {
    color: rgb(182, 29, 29);
    text-decoration: underline;
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <link href="error.css" rel="stylesheet" type="text/css" />
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <nav >
      <div >
        <div id="nav-left-links">
          <li><a href="#ti-header">THE INTERNATIONALS</a></li>
          <li>
            <a href="https://www.dota2.com/home" target="_blank">ABOUT</a>
          </li>
          <li>
            <a
              href="https://www.dota2.com/esports/summermajor22/watch/0/0/series"
              target="_blank"
              >DOTA TEAMS</a
            >
          </li>
          <li><a href="https://hawk.live/" target="_blank">DOTA LIVE</a></li>
        </div>
        <div >
          <a href="https://www.dota2.com/home" target="_blank"
            ><img
              
              src="https://i.pinimg.com/originals/8a/8b/50/8a8b50da2bc4afa933718061fe291520.jpg"
              alt="dota_logo"
              
          /></a>
        </div>
      </div>
      <div >
        <a
          href="https://www.dota2.com/newsentry/3190249489765271734"
          target="_blank"
          ><img
            src="https://www.insidesport.in/wp-content/uploads/2021/07/Screenshot-2021-07-05-173505.jpg"
            alt="dota2Image"
            
        /></a>
        <div id="socials">
          <a
            id="socio-logo"
            href="https://www.instagram.com/dota2/?hl=en"
            target="_blank"
            ><ion-icon name="logo-instagram"></ion-icon
          ></a>
          <a
            id="socio-logo"
            href="https://www.youtube.com/user/dota2"
            target="_blank"
            ><ion-icon name="logo-youtube"></ion-icon
          ></a>
          <a
            id="socio-logo"
            href="https://www.facebook.com/dota2/"
            target="_blank"
            ><ion-icon name="logo-facebook"></ion-icon
          ></a>
        </div>
      </div>
    </nav>
  </body>
</html>

I wanted the hover effect when the screen is atleast 1024px wide, so basically for the laptop sized screens and further. But the hover effect is not being activated even after 1024px. Instead it has become something like an onlick event. I am sorry if I used an irrevelent term, I am still a beginner. So the hover colors and effects are being applied after clicking a link but not while hovering. I have media queries for all the screens and the media query containing the hover effect is placed at last in all the media queries.

@media screen and (min-width: 1024px) {
  #tribute-link a:hover {
    color: black;
    text-decoration: underline;
  }
  .rightNavImg:hover {
    border: 2px solid gold;
  }
  ion-icon:hover {
    color: rgb(182, 29, 29);
  }
  .dotaLogo:hover {
    border: 8px solid gold;
  }
}

CodePudding user response：

Please try:

Clearing cache Clearing web browser's history/cache Restarting web browser

And see if that works after that.

CodePudding user response：

For the links it looks like you are using a invalid selector. I can't see that any elements in the markup has the id of tribute-link. You could try this:

.nav-left-links a:hover {
    color: black;
    text-decoration: underline;
}

Instead of what you currently have here:

#tribute-link a:hover {
    color: black;
    text-decoration: underline;
}

CodePudding user response：

It is already working as expected.

I think you are experiencing something like an onclick event because you are either on a device smaller than 1024px or you are checking it using the "Toggle device toolbar" in the browser dev tools.. hover function doesn't show directly when using this

You can either use the minimize button at the top-right or refer this: See :hover state in Chrome Developer Tools