css 悬停在网格布局中的某个对象上-错误Javascript

bejyjqdl  于 2023-01-22  发布在  Java
关注(0)|答案(1)|浏览(140)

我已经尝试了一切，我不能告诉为什么文字是地狱只出现在悬停在最后两个产品卡在这个网格布局和两个之前出现，但只有当我悬停在一定的产品卡，而不是整个产品卡和产品卡之前，当悬停没有文字出现在所有....

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

</body>
</html>
css

1条答案

按热度按时间
92dk7w1h

92dk7w1h1#

我修正了你的问题，这是一个非常简单的错误。问题是你设置了z轴;-1;在css中的类product-grid上。也许你想放1，而不是-1。你的类在body下。下面是你的代码，复制并粘贴到你的编辑器中，或者只是删除z索引：-1，并给予z索引：1添加到css中的product-grid元素。
要查看问题所在，下次可以使用inspect元素和hover元素。

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

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com