Question

CSS：

    #box{
padding:0;
margin:20px;
border:1px solid black;
font:bold 14px verdana, sans-serif;
}
#box div{display:none;
}
#box:hover div{
display:block;
width:150px;
height:90px;
position:absolute;
border:2px solid white;
padding:15px;
font:normal 12px verdana, sans-serif;
float:right;
margin-left:28px;
margin-top: -52px;
background-color: #000000;
}

HTML：

<td id="box" class='ok_term'>51
    <div>
    <p><strong><u>Important</u></strong></p>
    <p>blabla</p>
    </div></td>

有没有办法将表格静态显示在桌面而不是鼠标右边？这对鼠标来说是正确的，但是我想把它放在桌子上，有一点空间。

Answer 1

这样做，你将表格设置为position: relative，然后让你的div弹出left: 100%，在这种情况下将相对于表格。

table {
  position: relative;
}
#box {
  padding: 0;
  margin: 20px;
  border: 1px solid black;
  font: bold 14px verdana, sans-serif;
}
#box div {
  display: none;
}
#box:hover div {
  color: white;
  display: block;
  width: 150px;
  height: 90px;
  position: absolute;
  border: 2px solid white;
  padding: 15px;
  font: normal 12px verdana, sans-serif;
  left: 100%;
  top: 0;
  background-color: #000000;
}

<table border="1">
  <tr>
    <td id="box" class='ok_term'>51
      <div>
        <p><strong><u>Important</u></strong></p>
        <p>blabla</p>
      </div>
    </td>
    <td id="box" class='other_term'>ok_f
      <div>
        <p><strong><u>Important</u></strong></p>
        <p>hi</p>
      </div>
    </td>

  </tr>
</table>

静态地方的<div>信息框

1 个答案: