Glitch in hover state when links are broken into multiple CSS columns

Question

When there is a list of links and you apply the 'column-count' CSS property to the container and you hover slightly below the last link in the first column (link 3 in the example) then the hover state will apply to the first link in the second column instead.

.two-column {
  column-count: 2;
  column-gap: 2.5rem;
  width: 200px;
}

a:hover {
  text-decoration: none;
}

<ul class="two-column">
                          
  <li>
    <a href="#">
      Link 1
    </a>
  </li>

  <li>
    <a href="#">
      Link 2
    </a>
  </li>

  <li>
    <a href="#">
      Link 3
    </a>
  </li>

  <li>
    <a href="#">
      Link 4
    </a>
  </li>

  <li>
    <a href="#">
      Link 5
    </a>
  </li>

</ul>

I have also made a pen of the issue here codepen.

Edit: You can see it happening in this GIF. Tested in Chrome 92 on macOS Big Sur, this doesn't seem to be a problem on Windows.

It's subtle but there in the Codepen in Chrome 92 but you have to hover *really* close. Frankly it's so small as to be **almost** irrelevant. Perhaps something with breaking? — Paulie_D, Aug 12 '21 at 15:24
No repro in either Firefox 91 or Chrome 92 in the CodePen or in the Stack Snippet, even when zoomed in 500% to try and get as close as possible. — TylerH, Aug 12 '21 at 15:28
What OS and OS version are you using? Can you reproduce in a private browsing session, or after you shut your computer down and start it back up again with a new session of Chrome? I suspect caching or first-time load only. I still can't reproduce this on Chrome-latest (92.x) in Windows 10 (or any other browser). — TylerH, Aug 16 '21 at 15:34
I think you're right @TylerH, I just tried on Windows myself and couldn't recreate the issue so it looks like this is a macOS specific issue. I can reproduce in Chrome 92.x and on macOS Big Sur. — tay, Aug 17 '21 at 13:28

score 1 · Answer 1 · answered Aug 27 '21 at 09:30

1

You have to increase the vertical gap between each list item. Here you can apply a line-height: 20px; to the li tag.

PS: Value is not specific.

answered Aug 27 '21 at 09:30

Abhishek Rawat

131
2

score 1 · Answer 2 · answered Aug 30 '21 at 21:04

I found that Windows users can see the issue when tabbing to focus on each link.
Seems like giving the anchor tags a display of inline-block actually makes it better. Hopefully this will solve the issue on macOS aswell.

.two-column {
  column-count: 2;
  column-gap: 2.5rem;
  width: 200px;
}

a {
 display: inline-block;
}

a:hover {
  text-decoration: none;
}

<ul class="two-column">
                          
  <li>
    <a href="#">
      Link 1
    </a>
  </li>

  <li>
    <a href="#">
      Link 2
    </a>
  </li>

  <li>
    <a href="#">
      Link 3
    </a>
  </li>

  <li>
    <a href="#">
      Link 4
    </a>
  </li>

  <li>
    <a href="#">
      Link 5
    </a>
  </li>

</ul>

score 0 · Answer 3 · answered Aug 26 '21 at 04:50

0

This worked in Chrome on macOS.

a:hover::after {
  content: ' ';
}

answered Aug 26 '21 at 04:50

Julaine

15
1
4

I'm experiencing the same behaviour as before after adding this unfortunately – tay Aug 26 '21 at 10:01
Remove the extra blank lines in your HTML. – Julaine Aug 26 '21 at 22:50
Here is a [codepen](https://codepen.io/julainescott/pen/GREJegy). – Julaine Aug 27 '21 at 13:54
Still the same behaviour for me on the codepen – tay Aug 27 '21 at 15:41
Which version of Chrome on macOS are you testing the codepen in? I tested in Version 92.0.4515.159. – Julaine Aug 27 '21 at 23:38

score 0 · Answer 4 · answered Aug 31 '21 at 08:12

Problem

The problem you have is the gap between your list-items. If items are in same column, then it is not a problem at all. But in your case, the next list-item lies in the second column.

My Understanding

You have created only columns without rows. The content in the column can be anything like text, image, link, etc. which is divided into two columns(in your case) by the browser. As, there are no rows then you cannot apply properties like row-gap which only works with the grids.

Solution

Change the existing structure by - either using CSS grid or flex.
With the existing structure - make a gap between list-items. Possibly by using either of the following CSS property on list items

line-height
margin
padding

score 0 · Answer 5 · answered Feb 08 '22 at 18:43

As a workaround for this bug, you can add a 1px tall element to cover the bottom of the column to prevent hover events:

.two-column {
  column-count: 2;
  column-gap: 2.5rem;
  width: 200px;
  position: relative;
}

/* Hack for Chrome column hover bug */
.two-column::after {
  content: '';
  height: 1px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

a:hover {
  text-decoration: none;
}

<ul class="two-column">
                          
  <li>
    <a href="#">
      Link 1
    </a>
  </li>

  <li>
    <a href="#">
      Link 2
    </a>
  </li>

  <li>
    <a href="#">
      Link 3
    </a>
  </li>

  <li>
    <a href="#">
      Link 4
    </a>
  </li>

  <li>
    <a href="#">
      Link 5
    </a>
  </li>

</ul>

Glitch in hover state when links are broken into multiple CSS columns

5 Answers5

Problem

Solution