串列項中的css懸停效果高度

我只希望懸停的元素受其高度的影響。但是所有行專案的高度都會增加。我能做些什么來增加剛剛懸停的元素的高度？（如果有javascript的解決方案，它也會）

HTML 和 CSS 代碼：

.names {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.names div {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 16px 0;
  text-align: center;
}

.names div a {
  font-size: 16px;
  color: #25282e;
  text-decoration: none;
}

.names div a:hover {
  font-weight: 700;
}

.names div a:hover~img {
  display: block;
}

.names div img {
  width: 40px;
  margin-top: 16px;
  display: none;
}

<div class="names">
  <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
</div>

uj5u.com熱心網友回復：

我不確定您想要的確切布局，但通常只需position: absolute在懸停時添加到影像。例如

.names {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.names div {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 16px 0;
  text-align: center;
}

.names div a {
  font-size: 16px;
  color: #25282e;
  text-decoration: none;
}

.names div a:hover {
  font-weight: 700;
}

.names div a:hover~img {
  display: block;
  position: absolute;
  margin-top: 20px;
}

.names div img {
  width: 40px;
  margin-top: 16px;
  display: none;
}

<div class="names">
  <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
</div>

需要注意的是，我還添加了margin-top: 20px只是出于文體目的，它不是必需的。

uj5u.com熱心網友回復：

你可以做的一件事是給你的物品高度。

我.names div通過添加 height:30px;例如編輯選擇器

.names {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.names div {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 16px 0;
  height:30px;
  text-align: center;
}

.names div a {
  font-size: 16px;
  color: #25282e;
  text-decoration: none;
}

.names div a:hover {
  font-weight: 700;
}

.names div a:hover~img {
  display: block;
}

.names div img {
  width: 40px;
  margin-top: 16px;
  display: none;
}

<div class="names">
  <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
</div>

如您所見，只有懸停的專案在高度上受到影響。

您可以給每個專案一個更大的高度，這樣影像就不會重疊：

.names {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.names div {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 16px 0;
  height:70px;
  text-align: center;
}

.names div a {
  font-size: 16px;
  color: #25282e;
  text-decoration: none;
}

.names div a:hover {
  font-weight: 700;
}

.names div a:hover~img {
  display: block;
}

.names div img {
  width: 40px;
  margin-top: 16px;
  display: none;
}

<div class="names">
  <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
</div>

標籤：javascripthtmlcss粗鲁的

上一篇：如何修復我的inline-flex圖示的對齊方式？

下一篇：如何保持左側和右側的邊距調整但相同？尾風CSS