我正在制作一个包含一些标记的表格，这些标记周围有一个框。当你将鼠标悬停在框上时，标记需要稍微放大一点，以显示它是活动的。这是我的代码：

.container {
  position: absolute;
  width: 80%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0;
  margin: 0;
}

#mark_table {
  text-align: center;
  padding: 0;
  border: 1px solid #DDDDDD;
  width: 100%;
  font-size: 13px;
  border-collapse: collapse;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  font-family: 'Open Sans';
}

#mark_table tr {
  border-bottom: 1px solid #DDDDDD;
  max-height: 39px;
  height: 20px;
}

#mark_table .spacer {
  width: 100%;
}

#mark_table th {
  padding: 5px;
  vertical-align: bottom;
}

#mark_table .rotate_th {
  padding: 0;
  vertical-align: middle;
}

#mark_table .rotate {
  transform: rotate(285deg);
  padding: 0;
}

#mark_table .table_header {
  height: 60px;
  text-align: center;
}

.mark_wrapper {
  text-align: left;
}

.mark {
  background-color: #00C853;
  display: inline-block;
  margin: 5px;
  min-width: 30px;
  max-width: 30px;
  border-radius: 3px;
  text-align: center;
}

.mark:hover {
  padding: 1px;
}

.mark a {
  color: white;
  text-decoration: none;
  cursor: default;
  display: inline-block;
  margin: 5px;
}

@media screen and (max-width: 1024px) {
  body {
    position: relative;
    height: 100%;
  }
  .container {
    left: 0;
    transform: none;
    box-sizing: border-box;
    height: 100%;
    width: auto;
    padding: 2%;
  }
}

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

<div class="container">
  <table id="mark_table">

    <tr class="table_header">
      <th>Vakken</th>
      <th>Cijfers</th>
      <th class="spacer"></th>
      <th class="rotate_th">
        <div class="rotate">Rapport Gem.</div>
      </th>
      <th class="rotate_th">
        <div class="rotate">Rapport Cijfer</div>
      </th>
    </tr>

    <tr>
      <td class="subject">
        <span title="Nederlandse taal en cultuur">netl</span>
      </td>
      <td colspan="2">
        <div class="mark_wrapper">
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
        </div>
      </td>
      <td>
        <div class="mark"><a href="#">X.X</a></div>
      </td>
      <td class="final">
        <div class="mark"><a href="#">X</a></div>
      </td>
    </tr>

    <tr>
      <td class="subject">
        <span title="Nederlandse taal en cultuur">netl</span>
      </td>
      <td colspan="2">
        <div class="mark_wrapper">
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
        </div>
      </td>
      <td>
        <div class="mark"><a href="#">X.X</a></div>
      </td>
      <td class="final">
        <div class="mark"><a href="#">X</a></div>
      </td>
    </tr>

    <tr>
      <td class="subject">
        <span title="Nederlandse taal en cultuur">netl</span>
      </td>
      <td colspan="2">
        <div class="mark_wrapper">
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
        </div>
      </td>
      <td>
        <div class="mark"><a href="#">X.X</a></div>
      </td>
      <td class="final">
        <div class="mark"><a href="#">X</a></div>
      </td>
    </tr>
    <tr>
      <td class="subject">
        <span title="Nederlandse taal en cultuur">netl</span>
      </td>
      <td colspan="2">
        <div class="mark_wrapper">
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
        </div>
      </td>
      <td>
        <div class="mark"><a href="#">X.X</a></div>
      </td>
      <td class="final">
        <div class="mark"><a href="#">X</a></div>
      </td>
    </tr>
    <tr>
      <td class="subject">
        <span title="Nederlandse taal en cultuur">netl</span>
      </td>
      <td colspan="2">
        <div class="mark_wrapper">
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
        </div>
      </td>
      <td>
        <div class="mark"><a href="#">X.X</a></div>
      </td>
      <td class="final">
        <div class="mark"><a href="#">X</a></div>
      </td>
    </tr>
    <tr>
      <td class="subject">
        <span title="Nederlandse taal en cultuur">netl</span>
      </td>
      <td colspan="2">
        <div class="mark_wrapper">
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
        </div>
      </td>
      <td>
        <div class="mark"><a href="#">X.X</a></div>
      </td>
      <td class="final">
        <div class="mark"><a href="#">X</a></div>
      </td>
    </tr>
    <tr>
      <td class="subject">
        <span title="Nederlandse taal en cultuur">netl</span>
      </td>
      <td colspan="2">
        <div class="mark_wrapper">
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
        </div>
      </td>
      <td>
        <div class="mark"><a href="#">X.X</a></div>
      </td>
      <td class="final">
        <div class="mark"><a href="#">X</a></div>
      </td>
    </tr>
    <tr>
      <td class="subject">
        <span title="Nederlandse taal en cultuur">netl</span>
      </td>
      <td colspan="2">
        <div class="mark_wrapper">
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
        </div>
      </td>
      <td>
        <div class="mark"><a href="#">X.X</a></div>
      </td>
      <td class="final">
        <div class="mark"><a href="#">X</a></div>
      </td>
    </tr>
    <tr>
      <td class="subject">
        <span title="Nederlandse taal en cultuur">netl</span>
      </td>
      <td colspan="2">
        <div class="mark_wrapper">
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
        </div>
      </td>
      <td>
        <div class="mark"><a href="#">X.X</a></div>
      </td>
      <td class="final">
        <div class="mark"><a href="#">X</a></div>
      </td>
    </tr>

    
  </table>
</div>

mark类包含了标记，正如你所看到的，当你把鼠标悬停在其中一个标记上时，它的填充会增加，但是它会增加行的高度，并将其他标记向右移动一点。
我需要行高保持不变，其他标记保持在相同的位置。请记住，每当添加太多标记时，它们需要跳到下一行。
我尝试向mark_wrapper添加一个max-height，但是这会阻止标记跳到下一行，并且使标记只在底部增加高度。

2条答案

按热度按时间

carvr3hs1#

在悬停时为标记添加缩放效果，而不是添加填充

.mark:hover {
  transform:scale(1.1);
}

x一个一个一个一个x一个一个二个x

赞(0）回复(0）举报 2023-02-10

bksxznpy2#

我的解决方案：JSFiddle.
作为缩放标记的替代方法，您也可以在添加额外的 * padding * 时删除一些 * margin *。因此，当您添加1px的额外padding时，您同时删除了1px的margin，因此您不会看到标记周围的空间有任何差异。（原始边距为5px，悬停时，顶部和底部边距将变为4px以抵消额外的填充，而左右边距将保持不变5px。）

.mark:hover {
  padding: 1px;
  margin: 4px 5px;
}

为了帮助调整整体间距/大小，还应添加以下内容：

* {
  box-sizing: border-box;
}

如果你想知道更多关于 * box-model * 和它的具体用法，我推荐this video，它帮了我很多。

css 增加框的边距会增加它所在的表行的高度

2条答案

相关问题

热门标签

最新问答