将鼠标悬停在 img 上时表格必须可见
Posted
技术标签:
【中文标题】将鼠标悬停在 img 上时表格必须可见【英文标题】：Table has to be visible while hovering over img 【发布时间】：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" >
<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" >
<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" >
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="/Users/Bram/Desktop/Websites/2018-2019/Ferrari/Images/Auto's/488_Pista.jpg" >
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="/Users/Bram/Desktop/Websites/2018-2019/Ferrari/Images/Auto's/GTC4Lusso.jpg" >
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="/Users/Bram/Desktop/Websites/2018-2019/Ferrari/Images/Auto's/GTC4Lusso_T.jpg" >
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="/Users/Bram/Desktop/Websites/2018-2019/Ferrari/Images/Auto's/Portofino.jpg" >
</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。 【参考方案1】：试试这个代码..希望这个代码能工作！！！
*
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" >
<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" >
<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" >
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" >
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" >
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" >
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" >
</div>
</div>
</div>【讨论】：
感谢您的回复。这段代码似乎有效。但是，我希望我的图像在悬停时具有低不透明度，并且我的表格显示在所有这些之上。这可能吗？【参考方案2】：我已更新此代码，希望对您有用。
*
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: 0.5;
z-index: 2;
.imageinfo
position: absolute;
opacity: 0;
transition: all 0.5s linear;//added
.imageinfo table
border: 1px solid #000;
background-color: #FFFFFF;
position: absolute;
top: -23px;
.imagehover td
padding: 0.5em;
border: 1px solid #000;
.imageinfo:hover
opacity: 0.5; //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" >
<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" >
<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" >
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" >
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" >
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" >
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" >
</div>
</div>
</div>
Run code snippetHide results【讨论】：
以上是关于将鼠标悬停在 img 上时表格必须可见的主要内容，如果未能解决你的问题，请参考以下文章
使用 ng-repeat 将鼠标悬停在表格中的文本上时显示图像