unwanted hover effect on next column

Question

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>

if you can add odd number of of `` tag inside the `
` as you code it give the your error else in case of even number of `a` inside the div give good response. — Anshu, Jun 23 '19 at 04:15
@Anshu - try `six` items and `four` columns - the problem again — qadenza, Jun 23 '19 at 04:19
@qadenza You can try below snippet solution. It works perfectly with `n number` of columns and with `n number` of items — Sai Manoj, Jun 23 '19 at 04:30
the common solution for this issue is to set `inline-block` instead of block then consider width:100% — Temani Afif, Jun 23 '19 at 08:14

Sai Manoj · Accepted Answer · 2019-06-23T04:35:10.523

2

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>

edited Jun 23 '19 at 04:35

answered Jun 23 '19 at 04:25

Sai Manoj

3,809
1
14
35

this works, but hovering an item without margin is rather ugly - so huge white area – qadenza Jun 23 '19 at 04:33
you can reduce that by adjusting line-height – Sai Manoj Jun 23 '19 at 04:34

score 1 · Answer 2 · edited Jun 23 '19 at 04:38

Here is css Column way

.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 here you no need to remove margin – Codesigner Jun 23 '19 at 04:37 — Codesigner, Jun 23 '19 at 04:37

unwanted hover effect on next column

2 Answers2