htmlcsscolumn-count

unwanted hover effect on next column

Place the mouse on third lorem ipsum and you'll see an unwanted hover effect on the next column.

How to avoid this?

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

Solution

  • Remove all padding and margin from link and add line-height to it. That would solve your problem. Below is the snippet for the same

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