CSS hover on anchor tag showing i-beam cursor for a fraction of a second

Question

I'm learning ReactJS by recreating the ionicframework.com site. But there's a small problem.

I have a set of anchor tags in the header. When I hover over them, the cursor changes to i-beam for a fraction of a second and only then, it changes to the pointer (which is intended). This is observed in both Firefox and Chrome on my machine. The site is apparently free of this glitch. I have captured my screen to illustrate what is happening. Here's the GIF hosted on imgur.

I have no event listeners attached to the links. It is pure CSS with the :hover pseudo class.

I also made a fiddle, but, unfortunately, the glitch is not very apparent. Try moving your mouse back and forth quickly over the links to see.

.preheader {
    position: relative;
    background: white;
    box-shadow: 0 1px 2px 0 rgba(0, 20, 56, .06);
    padding: 8px 0;
    top: 0;
    left: 0;
    z-index: 999;
}

.container {
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.preheaderMenu {
    font-family: 'Eina', "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    z-index: inherit;
}

.preheaderLinks {
    z-index: inherit;
    box-sizing: border-box;
    transition: .2s color;
    padding-right: 16px;
    font-size: 10px;
    color: #a8b0be;
    letter-spacing: .04em;
}

.preheaderLinks:hover {
    color: #3880ff;
    cursor: pointer;
}

.subMenu {
    z-index: inherit;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: baseline;
}

.preheaderLinksUnderlined {
    letter-spacing: .06em;
    color: #727a87;
    text-transform: uppercase;
    padding: 0;
    border-bottom: 2px solid #e8ebf1;
}

.preheaderCTA {
    text-decoration: none;
    transition: 0.3s background, 0.2s color;
    color: #3880ff;
    background-color: #e3efff;
    box-sizing: border-box;
    font-size: 10px;
    letter-spacing: 0.04em;
    border-radius: 3px;
    padding: 4px 6px;
    margin-right: 30px;
}

.preheaderCTA:hover {
    color: #fff;
    background-color: #3880ff;
    box-shadow: none;
}

<nav class="preheader">
      <div class="container">
        <div class="preheaderMenu">
          <div class="subMenu">
            <a class="preheaderLinks">FRAMEWORK</a>
            <a class="preheaderLinks">PWAs</a>
          </div>
          <div class="subMenu">
            <a class="preheaderLinks preheaderLinksUnderlined"}>
              The 2018 Ionic Developer Survey is here - Take the 2018 survey
            </a>
          </div>
          <div class="subMenu">
            <a class="preheaderLinks">HELP</a>
            <a href="#" class="preheaderCTA">
              LOG IN
            </a>
          </div>
        </div>
      </div>
    </nav>

What is the problem? What can I do to stop this?

Answer 1

It's because you are applying cursor: pointer on the hover function.

Try applying cursor: pointer for the non-hover function, like this,

.preheaderLinks {
  z-index: inherit;
  box-sizing: border-box;
  transition: .2s color;
  padding-right: 16px;
  font-size: 10px;
  color: #a8b0be;
  letter-spacing: .04em;
  cursor: pointer;
}

Answer 2

Move cursor: pointer; from .preheaderLinks:hover to .preheaderLinks:

.preheader {
    position: relative;
    background: white;
    box-shadow: 0 1px 2px 0 rgba(0, 20, 56, .06);
    padding: 8px 0;
    top: 0;
    left: 0;
    z-index: 999;
}

.container {
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.preheaderMenu {
    font-family: 'Eina', "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    z-index: inherit;
}

.preheaderLinks {
    z-index: inherit;
    box-sizing: border-box;
    transition: .2s color;
    padding-right: 16px;
    font-size: 10px;
    color: #a8b0be;
    letter-spacing: .04em;
    cursor: pointer;
}

.preheaderLinks:hover {
    color: #3880ff;
}

.subMenu {
    z-index: inherit;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: baseline;
}

.preheaderLinksUnderlined {
    letter-spacing: .06em;
    color: #727a87;
    text-transform: uppercase;
    padding: 0;
    border-bottom: 2px solid #e8ebf1;
}

.preheaderCTA {
    text-decoration: none;
    transition: 0.3s background, 0.2s color;
    color: #3880ff;
    background-color: #e3efff;
    box-sizing: border-box;
    font-size: 10px;
    letter-spacing: 0.04em;
    border-radius: 3px;
    padding: 4px 6px;
    margin-right: 30px;
}

.preheaderCTA:hover {
    color: #fff;
    background-color: #3880ff;
    box-shadow: none;
}

<nav class="preheader">
      <div class="container">
        <div class="preheaderMenu">
          <div class="subMenu">
            <a class="preheaderLinks">FRAMEWORK</a>
            <a class="preheaderLinks">PWAs</a>
          </div>
          <div class="subMenu">
            <a class="preheaderLinks preheaderLinksUnderlined"}>
              The 2018 Ionic Developer Survey is here - Take the 2018 survey
            </a>
          </div>
          <div class="subMenu">
            <a class="preheaderLinks">HELP</a>
            <a href="#" class="preheaderCTA">
              LOG IN
            </a>
          </div>
        </div>
      </div>
    </nav>

No need to wait for :hover to apply it.