Q:

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

I'm learning ReactJS by recreating the ionicframework.com site. But there's a small problem.
I have a set of anchor tags on the header. When I hover on 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 website is apparently free of this glitch. I tried capturing my screen to illustrate what was happening. Here's a GIF hosted on imgur.
I have no listeners attached to the links in react. It is pure CSS with :hover pseudo class.
I also made a fiddle, but unfortunately the glitch was minimal (try moving your mouse quickly and frequently 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?
Sorry if this is a duplicate question. I tried searching. Couldn't find one that is exactly matching.

A:

its because you are applying cursor:pointer on hover function,
try applying cursor:pointer for not 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;
}

A:

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.

