Hover doesn't work in grid container

HTML-CSS
1

I think I’m having a serious blackout because I don’t know why my links aren’t working. Can someone take a look at my codes?

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./tfg2.css">
  <title>TFG2 - Home Page</title>
</head>
<body>
  <div class="gradient-bar">
    <div class="image">
      <img src="/Users/ingebaert/Desktop/Excercises/Webdesign/TFG1/TFG-Head.webp" width="100" height="100" alt="">
    </div>
    <div class="p-custom p1">
      <a href="https://topfishinggadgets.com">Home Page</a>
    </div>
    <div class="p-custom p2">
      <a href="https://topfishinggadgets.com/Blog-Content-Table.html">Blog Content</a>
    </div>
    <div class="p-custom p3">
      <a href="https://topfishinggadgets.com/Different-Fish-Species.html">Fish Species</a>
    </div>
    <div class="p-custom p4">
      <a href="https://topfishinggadgets.com/Questions.html">Questions</a>
    </div>
    <div class="p-custom p5">
      <a href="https://topfishinggadgets.com/Fishing%20News.html">News</a>
    </div>
    <div class="p-custom p6">
      <a href="https://topfishinggadgets.com/blog-2/">Blogroll</a>
    </div>
    <div class="p-custom p7">
      <a href="https://topfishinggadgets.com/fishing-spots-international/">Fishing Spots</a>
    </div>
  </div>
  <div class="grid-content">
    <video id="video-background" autoplay loop muted><source src="https://topfishinggadgets.com/aquarium.mp4"   
      type="video/mp4">
    </video>
    <div class="welcome">Welcome To "Top Fishing Gadgets"</div>
  </div>
</body>
</html>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Aclonica&family=Lobster&family=Pacifico&display=swap');

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

a{text-decoration: none;border:2px solid orange;border-radius:10px}
a:hover{border:2px solid purple;background-color:purple;color:orange;cursor:pointer}

.gradient-bar{display:grid;position:fixed;grid-template-columns:repeat(60,1fr);background:rgb(235,231,182);
  background:linear-gradient(90deg,#ebe7b6 13%,#e6e171 33%,#edcf55 48%,#b3f1d7 74%,#b3e1f1 92%)}

.grid-content{display:grid;grid-template-columns:repeat(60,1fr);grid-template-rows: repeat(60,1fr)}

.p-custom{font-size:18px;text-align:center;height:100px;line-height:100px;font-weight:bold}

.p1{grid-column:2/11}.p2{grid-column:11/22}.p3{grid-column:22/32}.p4{grid-column:32/39}
.p5{grid-column:39/45}.p6{grid-column:45/51}.p7{grid-column:51/61}

.grid-content{display:grid;grid-template-columns:repeat(60,1fr);grid-template-rows:repeat(60,1fr);
  position: relative; /* Container needs to be positioned for absolute positioning of children */}

#video-background{grid-column:1/-1; /* Span across all columns */grid-row:1/-1; /* Span across all rows */
  margin:0;width:100%;height:70%;object-fit:cover;opacity:1;z-index:-1; /* Move the video behind other elements */}

.welcome{
  text-align:center;
  color:white;
  font-size:55px;
  position:absolute;
  grid-column:1/-1; /* Position in columns 1 to 61 */
  grid-row:20/21;
  font-family:Lobster,sans-serif;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  white-space: nowrap}

@media (max-width:770px){.p-custom{font-size:17px}}@media (max-width:730px){.p-custom{font-size:16px}}
@media (max-width:660px){.p-custom{font-size:15px}}@media (max-width:620px){.p-custom{font-size:14px}}
@media (max-width:610px){.p-custom{font-size:13px}}@media (max-width:600px){.p-custom{font-size:12px}}
@media (max-width:550px){.p-custom{font-size:11px}}
2

If you want to paste code in here that we can read then you need to use the following method.

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

3

So, do I have to repost it now? Here it is:

I think I’m having a serious blackout because I don’t know why my links aren’t working. Can someone take a look at my codes?

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./tfg2.css">
  <title>TFG2 - Home Page</title>
</head>
<body>
  <div class="gradient-bar">
    <div class="image">
      <img src="/Users/ingebaert/Desktop/Excercises/Webdesign/TFG1/TFG-Head.webp" width="100" height="100" alt="">
    </div>
    <div class="p-custom p1">
      <a href="https://topfishinggadgets.com">Home Page</a>
    </div>
    <div class="p-custom p2">
      <a href="https://topfishinggadgets.com/Blog-Content-Table.html">Blog Content</a>
    </div>
    <div class="p-custom p3">
      <a href="https://topfishinggadgets.com/Different-Fish-Species.html">Fish Species</a>
    </div>
    <div class="p-custom p4">
      <a href="https://topfishinggadgets.com/Questions.html">Questions</a>
    </div>
    <div class="p-custom p5">
      <a href="https://topfishinggadgets.com/Fishing%20News.html">News</a>
    </div>
    <div class="p-custom p6">
      <a href="https://topfishinggadgets.com/blog-2/">Blogroll</a>
    </div>
    <div class="p-custom p7">
      <a href="https://topfishinggadgets.com/fishing-spots-international/">Fishing Spots</a>
    </div>
  </div>
  <div class="grid-content">
    <video id="video-background" autoplay loop muted><source src="https://topfishinggadgets.com/aquarium.mp4"   
      type="video/mp4">
    </video>
    <div class="welcome">Welcome To "Top Fishing Gadgets"</div>
  </div>
</body>
</html>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Aclonica&family=Lobster&family=Pacifico&display=swap');

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

a{text-decoration: none;border:2px solid orange;border-radius:10px}
a:hover{border:2px solid purple;background-color:purple;color:orange;cursor:pointer}

.gradient-bar{display:grid;position:fixed;grid-template-columns:repeat(60,1fr);background:rgb(235,231,182);
  background:linear-gradient(90deg,#ebe7b6 13%,#e6e171 33%,#edcf55 48%,#b3f1d7 74%,#b3e1f1 92%)}

.grid-content{display:grid;grid-template-columns:repeat(60,1fr);grid-template-rows: repeat(60,1fr)}

.p-custom{font-size:18px;text-align:center;height:100px;line-height:100px;font-weight:bold}

.p1{grid-column:2/11}.p2{grid-column:11/22}.p3{grid-column:22/32}.p4{grid-column:32/39}
.p5{grid-column:39/45}.p6{grid-column:45/51}.p7{grid-column:51/61}

.grid-content{display:grid;grid-template-columns:repeat(60,1fr);grid-template-rows:repeat(60,1fr);
  position: relative; /* Container needs to be positioned for absolute positioning of children */}

#video-background{grid-column:1/-1; /* Span across all columns */grid-row:1/-1; /* Span across all rows */
  margin:0;width:100%;height:70%;object-fit:cover;opacity:1;z-index:-1; /* Move the video behind other elements */}

.welcome{
  text-align:center;
  color:white;
  font-size:55px;
  position:absolute;
  grid-column:1/-1; /* Position in columns 1 to 61 */
  grid-row:20/21;
  font-family:Lobster,sans-serif;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  white-space: nowrap}

@media (max-width:770px){.p-custom{font-size:17px}}@media (max-width:730px){.p-custom{font-size:16px}}
@media (max-width:660px){.p-custom{font-size:15px}}@media (max-width:620px){.p-custom{font-size:14px}}
@media (max-width:610px){.p-custom{font-size:13px}}@media (max-width:600px){.p-custom{font-size:12px}}
@media (max-width:550px){.p-custom{font-size:11px}}
4

Your .grid-content div is overlapping your .gradient-bar div because you have set it to position: relative. So it is blocking you from being able to click on the links.

5

And how can I solve that, please? Using position:absolute or with the z-index ?

6

Since (for some reason??) there has been no response in over a month and a half, I’ll give you the TLDR.
(incase you haven’t already fixed it)

Edit CSS:

Add to “.gradient-bar” CSS selector

z-index: 1;

Add to “.welcome” CSS selector

z-index: 0;

fixed :slight_smile:

codepen

7

I’m very sorry, I must have forgotten to reply… But everything is working fine now…

1 Like
8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.