How to make :hover only affect lettering instead of the box?
<p>I'm curious to how you make it so your :hover property will only affect the individual letters in my navigation bar instead of just hovering over the the box.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>* {
  margin: 0px;
  padding: 0px;
}
.navigation-bar {
  height: 3.2em;
  background: gray;
  text-align: center;
  border-top: 2px solid;
  border-bottom: 2px solid;
}
.navigation-bar ul {
  display: inline-block;
  list-style-type: none;
}
.navigation-bar li {
  display: inline;
}
.navigation-bar li a {
  color: white;
  padding: 0px 30px;
  margin: 1em 0 0 -2px;
  text-decoration: none;
  float: left;
  height: 1.2em;
  line-height: 1.2em;
}
.navigation-bar li a:hover,
a:focus {
  background-color: #111;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;link rel="stylesheet" href="navbar1.css"&gt;
&lt;div class="navigation-bar"&gt;
  &lt;div id="navigation-container"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Gallery&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>Here is an example of my code:
<a href="https://jsfiddle.net/uz081886/" rel="nofollow">https://jsfiddle.net/uz081886/</a></p>

<p>Right now when hovering over a tab it shows a black bar, how do I make it so it would just highlight the letters of each word? Such as when I hover over Home, the text color will turn to black instead of white without the black bar appearing?</p>