下一列不需要的悬停效果答案

【问题标题】：unwanted hover effect on next column下一列不需要的悬停效果
【发布时间】：2019-06-23 12:38:40
【问题描述】：

将鼠标放在第三个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>

【问题讨论】：

你可以看到这个codepen.io/anon/pen/EBmKww
如果您在编码时可以在<div> 内添加奇数个<a> 标记，则它会给出您的错误，否则如果div 内的偶数个a 会给出良好的响应。
@Anshu - 尝试six 项目和four 列 - 再次出现问题
@qadenza 您可以尝试以下 sn-p 解决方案。它与 n number 的列和 n number 的项目完美配合
这个问题的常见解决方案是设置inline-block而不是block然后考虑width:100%

标签： html css column-count

【解决方案1】：

从link 中删除所有padding 和margin 并将line-height 添加到其中。那会解决你的问题。下面是相同的sn-p

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

【讨论】：

这行得通，但是悬停没有边距的项目相当难看 - 如此巨大的白色区域
你可以通过调整 line-height 来减少它

【解决方案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>

【讨论】：

@qadenza 这里你不需要删除边距