Home > Net >  Hovering over something in a grid layout - ERROR Javascript
Hovering over something in a grid layout - ERROR Javascript

Time：01-18

I have tried everything and i can't tell why the hell the text is only appearing on hovering the last two product-card on this grid layout and the two before appear but only when i hover a certain of the product-card and not the whole product-card and the product-card before those when hovering do not have text appearing at all....

@font-face {
    font-family: 'Montserrat-Light';
    src: url(fonts\Montserrat-Light.ttf) format(ttf);
  }
  
  @font-face {
    font-family: 'SuisseIntl-Regular';
    src: url(SuisseIntl-Regular.ttf) format(ttf);
  }
  
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body {
    background: #272727;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }
  
  ul {
    list-style: none;
  }
 
  
.product-grid {
    position: relative;
    z-index: -1;
    display: grid;
    top: 200px;
    grid-template-columns: repeat(2, 300px);
    width: 200px;
    grid-gap: 0px;
    border: 0px solid blue;
    justify-content: center;
    
}

.product-card {
  position: relative;
  border: 1px solid blue;
  background-color: white;
  padding: 20px;
  text-align: center;
  align-items: center;
}

.product-card img{
  width: 200px;
  align-items: baseline;
}

.product-card .product-title,
.product-card .price {
font: 12px SuisseIntl-Regular, sans-serif;
color: lightgray;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease-in-out;
}

.product-card:hover .product-title,
.product-card:hover .price {
font: 12px SuisseIntl-Regular, sans-serif;
color: lightgray;
opacity: 1;
visibility: visible;
}

.product-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.product-title .price {
margin:auto;
}
<!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>CSS Hamburger Animation</title>
  <link rel="stylesheet" href="styles\shopall.css">
</head>
<body>
    <div >
        <div >
            <a href="#home" title=""><img src="images\New Balance\Aimé Leon Dore x 550 'Evergreen'\1.png" alt="Product 1"></a>
            <h3 >Aimé Leon Dore x 550 'Evergreen'</h3>
            <p >200 €</p>
        </div>
        <div >
            <img src="images\New Balance\Aimé Leon Dore x 550 'Green Yellow'\1.png" alt="Product 2">
            <h3 >Aimé Leon Dore x 550 'Green Yellow'</h3>
            <p >744 €</p>
        </div>
        <div >
            <img src="images\New Balance\Aimé Leon Dore x 827 'White'\1.png" alt="Product 3">
            <h3 >Aimé Leon Dore x 827 'White'</h3>
            <p >897 €</p>
        </div>
        <div >
            <img src="images\New Balance\Salehe Bembury x 2002R 'Peace Be The Journey'\1.png" alt="Product 3">
            <h3 >Salehe Bembury x 2002R 'Peace Be The Journey'</h3>
            <p >544 €</p>
        </div>
        <div >
            <img src="images\New Balance\990v4 Made in USA 'Made in 1982'\1.png" alt="Product 3">
            <h3 >990v4 Made in USA 'Made in 1982'</h3>
            <p >250 €</p>
        </div>
        <div >
            <img src="images\BAPE\Sk8 Sta 2 'ABC Camo - Red'\1.png" alt="Product 3">
            <h3 >Sk8 Sta 2 'ABC Camo - Red'</h3>
            <p >402 €</p>
        </div>
        <div >
            <img src="images\BAPE\Sk8 Sta M1 'Purple'\Untitled-1.png" alt="Product 3">
            <h3 >Sk8 Sta M1 'Purple'</h3>
            <p >402 €</p>
        </div>
        <div >
            <img src="images\Louis Vuitton\Louis Vuitton Trainer 'Violet Mesh'\1.png" alt="Product 3">
            <h3 >Louis Vuitton Trainer 'Violet Mesh'</h3>
            <p >1.602 €</p>
        </div>
        <div >
            <img src="images\Louis Vuitton\Louis Vuitton Trainer 'White Black Blue'\1.png" alt="Product 3">
            <h3 >Louis Vuitton Trainer 'White Black Blue'</h3>
            <p >1.602 €</p>
        </div>
        <div >
          <img src="images\Louis Vuitton\Louis Vuitton Trainer Low 'Orange Monogram Denim'\preview.png" alt="Product 3">
          <h3 >Louis Vuitton Trainer Low 'Orange Monogram Denim'</h3>
          <p >1.602 €</p>
        </div>
        <div >
          <img src="images\Nike\Concepts x Dunk Low SB 'Orange Lobster'\1.png" alt="Product 3">
          <h3 >Concepts x Dunk Low SB 'Orange Lobster'</h3>
          <p >490 €</p>
        </div>
        <div >
          <img src="images\Nike\Dior x Air Jordan 1 High\preview.png" alt="Product 3">
          <h3 >Dior x Air Jordan 1 High</h3>
          <p >16.752.00 €</p>
        </div>
        <div >
          <img src="images\Nike\Dunk Low Retro QS 'Argon' 2022\5.png" alt="Product 3">
          <h3 >Dunk Low Retro QS 'Argon' 2022</h3>
          <p >136 €</p>
        </div>
        <div >
          <img src="images\Nike\Florida A&M University x Dunk Low 'Rattlers'\1.png" alt="Product 3">
          <h3 >Florida A&M University x Dunk Low 'Rattlers'</h3>
          <p >260 €</p>
        </div>
        <div >
          <img src="images\Nike\Off-White x Cassius Hirst x Air Force 1 Low '07 'MCA'\preview.png" alt="Product 3">
          <h3 >Off-White x Cassius Hirst x Air Force 1 Low '07 'MCA'</h3>
          <p >8.892.00 €</p>
        </div>
        <div >
          <img src="images\Asics\Kiko Kostadinov x Brain Dead x Gel Fratelli 'Half-Man, Half-Alien'\preview.png" alt="Product 3">
          <h3 >Kiko Kostadinov x Brain Dead x Gel Fratelli 'Half-Man, Half-Alien'</h3>
          <p >462 €</p>
        </div>
        <div >
          <img src="images\Asics\Kiko Kostadinov x Gel Quantum Levitrack 'Candy Apple Red'\preview.png" alt="Product 3">
          <h3 >Kiko Kostadinov x Gel Quantum Levitrack 'Candy Apple Red'</h3>
          <p >$100</p>
        </div>
        <div >
          <img src="images\Asics\Kiko Kostadinov x Hysteric Glamour x Wmns Gel Quantum Lylia 'Blue Expanse'\preview.png" alt="Product 3">
          <h3 >Kiko Kostadinov x Hysteric Glamour x Wmns Gel Quantum Lylia 'Blue Expanse'</h3>
          <p >280 €</p>
        </div>
        <div >
          <img src="images\Adidas\Wales Bonner x Samba 'Black'\preview.png" alt="Product 3">
          <h3 >Wales Bonner x Samba 'Black'</h3>
          <p >378 €</p>
        </div>
        <div >
          <img src="images\Adidas\Adidas x Gucci\Adidas x Gucci Gazelle 'GG Monogram'\1.png" alt="Product 3">
          <h3 >Adidas x Gucci Gazelle 'GG Monogram'</h3>
          <p >650 €</p>
        </div>
        <div >
          <img src="images\Adidas\Adidas x Gucci\adidas x Gucci men's Gazelle sneaker\preview.png" alt="Product 3">
          <h3 >Adidas x Gucci Men's Gazelle Sneakers</h3>
          <p >650 €</p>
        </div>
        <div >
          <img src="images\Adidas\Adidas x Gucci\Adidas x Gucci Wmns Gazelle 'Light Blue Silk'\preview.png" alt="Product 3">
          <h3 >Adidas x Gucci Wmns Gazelle 'Light Blue Silk'</h3>
          <p >650 €</p>
        </div>
        <div >
          <img src="images\Adidas\Adidas x Gucci\Adidas x Gucci Wmns Gazelle 'White Green Red'\preview.png" alt="Product 3">
          <h3 >Adidas x Gucci Wmns Gazelle 'White Green Red'</h3>
          <p >575 €</p>    
        </div>
        <div >
          <img src="images\Adidas\Adidas x Gucci\Gucci x Gazelle 'Pink Velvet'\preview.png" alt="Product 3">
          <h3 >Gucci x Gazelle 'Pink Velvet'</h3>
          <p >650 €</p>
        </div>

</body>
</html>

CodePudding user response：

i fixed your problem it was very simple mistake. Problem was that you you had set z-index; -1; on class product-grid in css. Maybe you wanted to put 1, not -1. Your class was under body. Here is your code, copy it and paste it in your editor or just remove z-index: -1, and give z-index: 1 to your product-grid element in css.

To see whats problem you can use inspect element and hover element next time. :D

<!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>CSS Hamburger Animation</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div >
    <div >
        <div >
            <a href="#home" title=""><img src="images\New Balance\Aimé Leon Dore x 550 'Evergreen'\1.png" alt="Product 1"></a>
            <h3 >Aimé Leon Dore x 550 'Evergreen'</h3>
            <p >200 €</p>
        </div>
        <div >
            <img src="images\New Balance\Aimé Leon Dore x 550 'Green Yellow'\1.png" alt="Product 2">
            <h3 >Aimé Leon Dore x 550 'Green Yellow'</h3>
            <p >744 €</p>
        </div>
        <div >
            <img src="images\New Balance\Aimé Leon Dore x 827 'White'\1.png" alt="Product 3">
            <h3 >Aimé Leon Dore x 827 'White'</h3>
            <p >897 €</p>
        </div>
        <div >
            <img src="images\New Balance\Salehe Bembury x 2002R 'Peace Be The Journey'\1.png" alt="Product 3">
            <h3 >Salehe Bembury x 2002R 'Peace Be The Journey'</h3>
            <p >544 €</p>
        </div>
        <div >
            <img src="images\New Balance\990v4 Made in USA 'Made in 1982'\1.png" alt="Product 3">
            <h3 >990v4 Made in USA 'Made in 1982'</h3>
            <p >250 €</p>
        </div>
        <div >
            <img src="images\BAPE\Sk8 Sta 2 'ABC Camo - Red'\1.png" alt="Product 3">
            <h3 >Sk8 Sta 2 'ABC Camo - Red'</h3>
            <p >402 €</p>
        </div>
        <div >
            <img src="images\BAPE\Sk8 Sta M1 'Purple'\Untitled-1.png" alt="Product 3">
            <h3 >Sk8 Sta M1 'Purple'</h3>
            <p >402 €</p>
        </div>
        <div >
            <img src="images\Louis Vuitton\Louis Vuitton Trainer 'Violet Mesh'\1.png" alt="Product 3">
            <h3 >Louis Vuitton Trainer 'Violet Mesh'</h3>
            <p >1.602 €</p>
        </div>
        <div >
            <img src="images\Louis Vuitton\Louis Vuitton Trainer 'White Black Blue'\1.png" alt="Product 3">
            <h3 >Louis Vuitton Trainer 'White Black Blue'</h3>
            <p >1.602 €</p>
        </div>
        <div >
          <img src="images\Louis Vuitton\Louis Vuitton Trainer Low 'Orange Monogram Denim'\preview.png" alt="Product 3">
          <h3 >Louis Vuitton Trainer Low 'Orange Monogram Denim'</h3>
          <p >1.602 €</p>
        </div>
        <div >
          <img src="images\Nike\Concepts x Dunk Low SB 'Orange Lobster'\1.png" alt="Product 3">
          <h3 >Concepts x Dunk Low SB 'Orange Lobster'</h3>
          <p >490 €</p>
        </div>
        <div >
          <img src="images\Nike\Dior x Air Jordan 1 High\preview.png" alt="Product 3">
          <h3 >Dior x Air Jordan 1 High</h3>
          <p >16.752.00 €</p>
        </div>
        <div >
          <img src="images\Nike\Dunk Low Retro QS 'Argon' 2022\5.png" alt="Product 3">
          <h3 >Dunk Low Retro QS 'Argon' 2022</h3>
          <p >136 €</p>
        </div>
        <div >
          <img src="images\Nike\Florida A&M University x Dunk Low 'Rattlers'\1.png" alt="Product 3">
          <h3 >Florida A&M University x Dunk Low 'Rattlers'</h3>
          <p >260 €</p>
        </div>
        <div >
          <img src="images\Nike\Off-White x Cassius Hirst x Air Force 1 Low '07 'MCA'\preview.png" alt="Product 3">
          <h3 >Off-White x Cassius Hirst x Air Force 1 Low '07 'MCA'</h3>
          <p >8.892.00 €</p>
        </div>
        <div >
          <img src="images\Asics\Kiko Kostadinov x Brain Dead x Gel Fratelli 'Half-Man, Half-Alien'\preview.png" alt="Product 3">
          <h3 >Kiko Kostadinov x Brain Dead x Gel Fratelli 'Half-Man, Half-Alien'</h3>
          <p >462 €</p>
        </div>
        <div >
          <img src="images\Asics\Kiko Kostadinov x Gel Quantum Levitrack 'Candy Apple Red'\preview.png" alt="Product 3">
          <h3 >Kiko Kostadinov x Gel Quantum Levitrack 'Candy Apple Red'</h3>
          <p >$100</p>
        </div>
        <div >
          <img src="images\Asics\Kiko Kostadinov x Hysteric Glamour x Wmns Gel Quantum Lylia 'Blue Expanse'\preview.png" alt="Product 3">
          <h3 >Kiko Kostadinov x Hysteric Glamour x Wmns Gel Quantum Lylia 'Blue Expanse'</h3>
          <p >280 €</p>
        </div>
        <div >
          <img src="images\Adidas\Wales Bonner x Samba 'Black'\preview.png" alt="Product 3">
          <h3 >Wales Bonner x Samba 'Black'</h3>
          <p >378 €</p>
        </div>
        <div >
          <img src="images\Adidas\Adidas x Gucci\Adidas x Gucci Gazelle 'GG Monogram'\1.png" alt="Product 3">
          <h3 >Adidas x Gucci Gazelle 'GG Monogram'</h3>
          <p >650 €</p>
        </div>
        <div >
          <img src="images\Adidas\Adidas x Gucci\adidas x Gucci men's Gazelle sneaker\preview.png" alt="Product 3">
          <h3 >Adidas x Gucci Men's Gazelle Sneakers</h3>
          <p >650 €</p>
        </div>
        <div >
          <img src="images\Adidas\Adidas x Gucci\Adidas x Gucci Wmns Gazelle 'Light Blue Silk'\preview.png" alt="Product 3">
          <h3 >Adidas x Gucci Wmns Gazelle 'Light Blue Silk'</h3>
          <p >650 €</p>
        </div>
        <div >
          <img src="images\Adidas\Adidas x Gucci\Adidas x Gucci Wmns Gazelle 'White Green Red'\preview.png" alt="Product 3">
          <h3 >Adidas x Gucci Wmns Gazelle 'White Green Red'</h3>
          <p >575 €</p>    
        </div>
        <div >
          <img src="images\Adidas\Adidas x Gucci\Gucci x Gazelle 'Pink Velvet'\preview.png" alt="Product 3">
          <h3 >Gucci x Gazelle 'Pink Velvet'</h3>
          <p >650 €</p>
        </div>
    </div>
</body>
</html>






@font-face {
  font-family: 'Montserrat-Light';
  src: url(fonts\Montserrat-Light.ttf) format(ttf);
}

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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: #272727;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

ul {
  list-style: none;
}


.product-grid {
  position: relative;
  z-index: 1;
  display: grid;
  top: 200px;
  grid-template-columns: repeat(2, 300px);
  width: 200px;
  grid-gap: 0px;
  border: 0px solid blue;
  justify-content: center;
  
}

.product-card {
position: relative;
border: 1px solid blue;
background-color: white;
padding: 20px;
text-align: center;
align-items: center;
}

.product-card img{
width: 200px;
align-items: baseline;
}

.product-card .product-title,
.product-card .price {
font: 12px SuisseIntl-Regular, sans-serif;
color: lightgray;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease-in-out;
}

.product-card:hover .product-title,
.product-card:hover .price {
font: 12px SuisseIntl-Regular, sans-serif;
color: lightgray;
opacity: 1;
visibility: visible;
}

.product-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.product-title .price {
margin:auto;
}

Page link：https//www.codepudding.com/net/676111.html

Prev:How to align a picture and text vertically in css
Next:Angular - How can I update a subcomponent that takes an input parameter and renders it correctly the
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding