Question

我需要在将鼠标悬停在图像上时创建包含一些值的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>

任何人都可以给我一个解决方案，如下图所示。

Answer 1

我刚刚更改了叠加层的高度和宽度，并将其设置在图像顶部的正确位置。检查.demo:hover .overlay的样式以获取详细信息。同时更改table的高度和宽度。

＆＃13;

.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%;
  }

＆＃13;

<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>

＆＃13;

Answer 2

我们需要做一些改变。首先，我们将稍微更改元素的位置，并将其width设置为calc(100% - 20px)，并使用left: 10px将表格置于元素中心。

然后给表table-layout: fixed一个width: 100%，使其全宽。

.demo {
  position: relative;
  margin: 10px;
  width: 400px;
  height: 200px;
}
.overlay {
  display: none;
}
img {
  height: 100%;
  width: 100%;
}
.demo:hover .overlay {
  border: 2px solid black;
  border-radius: 5px;
  position: absolute;
  top: 10px;
  left: 10px;
  display: block;
  width: calc(100% - 20px);
  box-sizing: border-box;
  color: green;
  padding: 10px;
  font-size: 20px;
  text-align: center;
}

table#fill {
  table-layout: fixed;
  width: 100%;
}

table#fill td {
  color: green;
  padding: 10px;
}

<div class="demo">
  <img src="http://placehold.it/400x200" />
  <div class="overlay">Size
    <table id="fill">
      <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>

Answer 3

删除所有填充和边距并添加width: 100%; height: 100%;

＆＃13;

.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: 0px;
  left: 0px;
  display: block;
  color: green;
  font-size: 20px;
  text-align: center;
  width: 100%;
  height: 100%; 
}
table td {
  color: green;
  padding: 10px;
}

＆＃13;

<div class="demo">
  <img src="C:\Users\priyanka.s\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>

＆＃13;

在悬停时创建一个div，其宽度和高度与父级相同

3 个答案: