下一列不需要的悬停效果

Question

将鼠标放在第三个 lorem ipsum 上，您会在下一列上看到不需要的 hover 效果。

如何避免这种情况？

.footer{
 column-count:2;
 background:#006790;
 padding:9px 14px;
}

.link{
 display:block;
 padding:4px 10px;
 margin:7px 3px;
 color:white;
 white-space:nowrap;
 font-size:1.1em;
 border-radius:9px;
}

.link:hover{
 background:white;
 color:black;
}

<div class = 'footer'>
<a class='link' href='#'>lorem ipsum</a>
<a class='link' href='#'>lorem ipsum</a>
<a class='link' href='#'>lorem ipsum</a>
<a class='link' href='#'>lorem ipsum</a>
<a class='link' href='#'>lorem ipsum</a>
</div>

Answer 1

从 link 中删除所有 padding 和 margin，并向其添加 line-height。那会解决你的问题。下面是相同的片段

.footer {
  column-count: 2;
  background: #006790;
  padding: 9px 14px;
}

a.link {
  display: block;
  line-height: 30px;
  color: white;
  white-space: nowrap;
  font-size: 1.1em;
  border-radius: 9px;
  text-align: center
}

a.link:hover {
  background: white;
  color: black;
}

<div class='footer'>
  <a class='link' href='#'>lorem ipsum</a>
  <a class='link' href='#'>lorem ipsum</a>
  <a class='link' href='#'>lorem ipsum</a>
  <a class='link' href='#'>lorem ipsum</a>
  <a class='link' href='#'>lorem ipsum</a>
</div>

Answer 2

这里是css栏目方式

.footer {
  column-count: 2;
  background: #006790;
  padding: 9px 14px;
}

.link {
  display: block;
  padding: 4px 10px;
  margin: 7px 3px;
  color: white;
  white-space: nowrap;
  font-size: 1.1em;
  border-radius: 9px;
  -webkit-column-break-inside: avoid;
  /* Chrome, Safari, Opera */
  page-break-inside: avoid;
  /* Firefox */
  break-inside: avoid;
  /* IE 10+ */
}

.link:hover {
  background: white;
  color: black;
}

<div class='footer'>
  <a class='link' href='#'>lorem ipsum</a>
  <a class='link' href='#'>lorem ipsum</a>
  <a class='link' href='#'>lorem ipsum</a>
  <a class='link' href='#'>lorem ipsum</a>
  <a class='link' href='#'>lorem ipsum</a>
</div>

下一列不需要的悬停效果

unwanted hover effect on next column

html

css

column-count