我需要在将鼠标悬停在图像上时创建一个包含一些值的div。创建的div的父级应该是图像的高度和宽度。
样例代码：
.demo {
position: relative;
margin: 10px;
width: 350px;
height: 350px;
}
.overlay {
display: none;
}
img {
height: 100%;
width: 100%;
}
.demo:hover .overlay {
border: 2px solid black;
border-radius: 5px;
position: absolute;
top: 70px;
left: 10px;
display: block;
color: green;
padding: 10px;
font-size: 20px;
margin-left: 30px;
text-align: center;
}
table td {
color: green;
padding: 10px;
}<div class="demo">
<img src="Desktop\cup.png" />
<div class="overlay">Size
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
</div>
</div>谁能给我下图的解决方案。
最佳答案
我只是更改了叠加层的高度和宽度，并将其设置为图像顶部的正确位置。有关详细信息，请检查.demo:hover .overlay的样式。
还要更改table的高度和宽度。
.demo{
position: relative;
margin:10px;
width: 350px;
height: 350px;
}
.overlay {
display:none;
}
img{
height:100%;
width:100%;
}
.demo:hover .overlay {
width: 90%;
height: 80%;
border: 2px solid black;
border-radius: 5px;
position: absolute;
top: 20px;
left: 5px;
display: block;
color: green;
padding: 10px;
font-size: 20px;
/* margin-left: 30px; */
text-align: center;
}
table td {
color:green;
padding:10px;
}
table{
width:100%;
height:100%;
}<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
</style>
</head>
<body>
<div class="demo">
<img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg"/>
<div class="overlay">Size
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
</div>
</div>
</body>
</html>