html - 将鼠标悬停在 img 上时，表格必须可见

标签 html css image html-table hover

这是我在 Stack Overflow 上的第一篇文章。 基本上，我正在尝试创建一个图片库，其中包含汽车图片和有关汽车的信息。

我创建了一个表格，其中包含我希望在将鼠标悬停在图像上时可见的汽车详细信息。

我尝试使用不透明度，但似乎不起作用。还是我做错了什么？

我是否必须使用 JavaScript 来显示/隐藏表格，然后请指教。

HTML:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style2.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Image Gallery</title>
  </head>

  <body>


    <div class="ImageGallery">


        <div class="image">
          <div class="imagehover">
               <img src="C:/Users/Bram/Desktop/Websites/2018-2019/Ferrari/Images/Auto's/LaFerrari.jpg" alt="Ferrari_LaFerrari">
                <div class="centered-text">
                  <div class="imageinfo">
                              <table >
                                  <tr>
                                    <td>Type</td>
                                    <td>Ferrari LaFerrari</td>
                                  </tr>
                                  <tr>
                                    <td>Motor</td>
                                    <td> </td>
                                  </tr>
                                  <tr>
                                    <td>Vermogen</td>
                                    <td> </td>
                                  </tr>
                                  <tr>
                                    <td>0-100 km/u</td>
                                    <td> </td>
                                  </tr>
                                  <tr>
                                    <td>Topsnelheid</td>
                                    <td> </td>
                                  </tr>
                                  <tr>
                                    <td>Gewicht</td>
                                    <td> </td>
                                  </tr>
                              </table>
                    </div>
                  </div>

          </div>
        </div>

          <div class="image">
            <div class="imagehover">
                <img src="/Users/Bram/Desktop/Websites/2018-2019/Ferrari/Images/Auto's/812_Superfast.jpg" alt="Ferrari_812_Superfast">
                <div class="centered-text">
                  <div class="imageinfo">
                    <table >
                        <tr>
                          <td>Type</td>
                          <td>Ferrari 812 Superfast</td>
                        </tr>
                        <tr>
                          <td>Motor</td>
                          <td> </td>
                        </tr>
                        <tr>
                          <td>Vermogen</td>
                          <td> </td>
                        </tr>
                        <tr>
                          <td>0-100 km/u</td>
                          <td> </td>
                        </tr>
                        <tr>
                          <td>Topsnelheid</td>
                          <td> </td>
                        </tr>
                        <tr>
                          <td>Gewicht</td>
                          <td> </td>
                        </tr>
                      </table>
                    </div>
                  </div>
            </div>
          </div>

            <div class="image">
              <div class="imagehover">
                  <img src="/Users/Bram/Desktop/Websites/2018-2019/Ferrari/Images/Auto's/488_GTB.jpg" alt="Ferrari_488_GTB">
              </div>
            </div>

              <div class="image">
                <div class="imagehover">
                    <img src="/Users/Bram/Desktop/Websites/2018-2019/Ferrari/Images/Auto's/488_Pista.jpg" alt="Ferrari_488_Pista">
                </div>
              </div>

                <div class="image">
                  <div class="imagehover">
                      <img src="/Users/Bram/Desktop/Websites/2018-2019/Ferrari/Images/Auto's/GTC4Lusso.jpg" alt="Ferrari_GTC4Lusso">
                  </div>
                </div>

                  <div class="image">
                    <div class="imagehover">
                        <img src="/Users/Bram/Desktop/Websites/2018-2019/Ferrari/Images/Auto's/GTC4Lusso_T.jpg" alt="Ferrari_GTC4Lusso_T">
                    </div>
                  </div>

                    <div class="image">
                      <div class="imagehover">
                          <img src="/Users/Bram/Desktop/Websites/2018-2019/Ferrari/Images/Auto's/Portofino.jpg" alt="Ferrari_Portofino">
                      </div>
                    </div>

        </div>

  </body>

</html>



CSS:

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

.ImageGallery{
  display: flex;
  flex-wrap: wrap;
}

.image {
  position: relative;
  display: flex;
  flex: 100%;
  padding: 1em;
  justify-content: center;
  align-items: center;
}

.imagehover:hover {
  opacity: 0.1;
  transition: 1s ease;
}

.imagehover:hover .imageinfo{
  opacity: 0.5;
  z-index: 2;
}

.imageinfo{
  position: absolute;
  opacity: 0;
}

.imageinfo table{
  background-color: #FFFFFF;
}

.imagehover td{
  padding: 0.5em;
}

.imageinfo:hover{
  transition: 0.5s ease;
}

.centered-text{
  position: absolute;
  top: 15%;
  left: 42.5%;
  transform: translate(-50%, -50%);
}


@media screen and (min-width: 1024px){

  .ImageGallery{
    flex-direction: row;
    }

  .image{
    flex: 50%;
  }
}

最佳答案

试试这个代码..希望这个代码能工作!!!

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

.ImageGallery{
  display: flex;
  flex-wrap: wrap;
}

.image {
  position: relative;
  display: flex;
  flex: 100%;
  padding: 1em;
  justify-content: center;
  align-items: center;
}
.imagehover{
transition: all 0.5s linear;
}
.imagehover:hover .imageinfo{
  opacity: 1;
  z-index: 2;
}
.imageinfo{
  position: absolute;
  opacity: 0;
  transition: all 0.5s linear;//added
}

.imageinfo table{
  background-color: #FFFFFF;
}

.imagehover td{
  padding: 0.5em;
}

.imageinfo:hover{
  opacity: 1; //added
/*   transition: 0.5s ease; *///remove
}

.centered-text{
  position: absolute;
  top: 15%;
  left: 42.5%;
  transform: translate(-50%, -50%);
}


@media screen and (min-width: 1024px){

  .ImageGallery{
    flex-direction: row;
    }

  .image{
    flex: 50%;
  }
}
<div class="ImageGallery">


        <div class="image">
          <div class="imagehover">
               <img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" alt="Ferrari_LaFerrari">
                <div class="centered-text">
                  <div class="imageinfo">
                              <table >
                                  <tr>
                                    <td>Type</td>
                                    <td>Ferrari LaFerrari</td>
                                  </tr>
                                  <tr>
                                    <td>Motor</td>
                                    <td> </td>
                                  </tr>
                                  <tr>
                                    <td>Vermogen</td>
                                    <td> </td>
                                  </tr>
                                  <tr>
                                    <td>0-100 km/u</td>
                                    <td> </td>
                                  </tr>
                                  <tr>
                                    <td>Topsnelheid</td>
                                    <td> </td>
                                  </tr>
                                  <tr>
                                    <td>Gewicht</td>
                                    <td> </td>
                                  </tr>
                              </table>
                    </div>
                  </div>

          </div>
        </div>

          <div class="image">
            <div class="imagehover">
                <img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" alt="Ferrari_812_Superfast">
                <div class="centered-text">
                  <div class="imageinfo">
                    <table >
                        <tr>
                          <td>Type</td>
                          <td>Ferrari 812 Superfast</td>
                        </tr>
                        <tr>
                          <td>Motor</td>
                          <td> </td>
                        </tr>
                        <tr>
                          <td>Vermogen</td>
                          <td> </td>
                        </tr>
                        <tr>
                          <td>0-100 km/u</td>
                          <td> </td>
                        </tr>
                        <tr>
                          <td>Topsnelheid</td>
                          <td> </td>
                        </tr>
                        <tr>
                          <td>Gewicht</td>
                          <td> </td>
                        </tr>
                      </table>
                    </div>
                  </div>
            </div>
          </div>

            <div class="image">
              <div class="imagehover">
                  <img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" alt="Ferrari_488_GTB">
              </div>
            </div>

              <div class="image">
                <div class="imagehover">
                    <img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" alt="Ferrari_488_Pista">
                </div>
              </div>

                <div class="image">
                  <div class="imagehover">
                      <img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" alt="Ferrari_GTC4Lusso">
                  </div>
                </div>

                  <div class="image">
                    <div class="imagehover">
                        <img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" alt="Ferrari_GTC4Lusso_T">
                    </div>
                  </div>

                    <div class="image">
                      <div class="imagehover">
                          <img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" alt="Ferrari_Portofino">
                      </div>
                    </div>

        </div>

关于html - 将鼠标悬停在 img 上时，表格必须可见，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52728860/

上一篇：javascript - 如果我在空的 app.html 中加载 component.html，它们会以一种奇怪的方式重叠

下一篇：css - 如何考虑 AngularJS 组件的样式？

相关文章：

javascript - 如何根据屏幕宽度调用函数？

html - 在同一行中跨 bootstrap 列对齐多个元素

html - 如何在文本区域的右上角放置一个跨度？

javascript - 如何在html中隐藏所需的输入弹出窗口

html - 排除特定页面的已链接样式表或如何设置样式表的优先级

image - 使用 extjs 在网格中显示图像

html - 在 Scss 中使用 Reset 和 Normalizer

jquery - 使用 window.resize 在图像上再次运行加载函数？

c++ - 如何在 QLabel 中显示图像

android - 通过httpmultipart向服务器发送图片

©2024 IT工具网  联系我们