Home » Html » Hover depends on font-size in Chrome

Hover depends on font-size in Chrome

Posted by: admin November 29, 2017 Leave a comment

Questions:

What I’m trying…

I’m trying to make a menu with a hover effect. If you hover a link, it’s background-color should change. If you go to the next one, it should change smoothly to the next link.


Problem

When you hover over one link and then go to the next one, there is a small gap between the elements. If your mouse is at that exact spot, nothing happens.


Working Example

.menu-item {
  list-style: none;
  float: left;
  text-transform: uppercase;
  font-size: 21px;
  line-height: 30px;
}

a {
  padding: 20px;
}

a:hover {
  background-color: green;
}
<div id="menu">
  <ul class="menu-list">
    <li class="menu-item"><a href='#'>Menü #1</a></li>
    <li class="menu-item"><a href='#'>Menü #2</a></li>
    <li class="menu-item"><a href='#'>Menü #3</a></li>
  </ul>
</div>
Answers:

It’s actually an interesting question. The “issue” is caused by the browser CSS that is reading the display:inline; of the a tag, and not having it fill the entire display:block; of the li tag.

You can fix this by using the following CSS rule

.menu-item a {
    display:block;
}

Questions:
Answers:

Add display: block to the links. The link is smaller than the li

Questions:
Answers:

Remove the font-size and line-height from the menu-item, style the link directly. This behaviour most likely comes from rounding errors.