【发布时间】：2019-03-14 16:39:54
【问题描述】：
这是我在 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%;
}
}
【问题讨论】：
-
您需要使用 JavaScript 来显示/隐藏表格。你试过了吗，那么请出示代码。
-
您好，我正在使用此代码为学校分配作业。我只能使用 HTML 和 CSS，所以不能使用 JavaScript。
标签： html css image html-table hover