title: Too big blue select area
body: <p>My problem is that the blue select area is too big and cause of that when I move my cursor at the top text the hover property doesn't work. A text cursor appears there, but a cursor pointer should appear.</p>
  <p>I tried to add <code>z-index: -1;</code> and <code>user-select: none;</code> attribute to the text below,
  but it didn't help.</p>
  <p><a href="https://i.stack.imgur.com/JMeQI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JMeQI.png" alt="enter image description here" /></a></p>
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;style&gt;
              .selectionlist
              {
                  color: #777777;
                  font-weight: 400;
              }
  
              .selectionlist ol
              {
                  padding: 0;
                  margin: 0;
                  list-style-type: none;
              }
  
              .selectionlist ol a
              {
                  color: #777777;
                  text-decoration: none;
              }
  
              .selectionlist ol &gt; li
              {
                  display: inline-block;
              }
  
              .selectionlist ol &gt; li::before
              {
                  content: &quot;/ &quot;;
              }
  
              .selectionlist ol &gt; li:first-child:before
              {
                  content: &quot;&quot;;
              }
  
              .selectionlist ol &gt; li &gt; a:hover, .selectionlist ol &gt; li:last-child &gt; a:hover
              {
                  color: #00B4FF;
              }
  
              .selectionlist ol &gt; li:last-child &gt; a
              {
                  color: #00B4FF;
                  font-weight: 600;
              }
              .hea
              {
                  margin-top: -10px;
                  display: flex;
                  align-items: center;
              }
              .tg
              {
                  margin-right: 10px;
                  font-size: 50px;
                  color: #00B4FF;
                  font-weight: 600;
              }
              #name
              {
                  display: inline-block;
                  font-size: 50px;
              }
              .ad
              {
                  display: inline-flex;
                  align-items: center;
                  justify-content: center;
                  width: 70px;
                  height: 30px;
                  border-radius: 20px;
                  box-sizing: border-box;
                  border: 2px solid #DDD;
                  color: #DDD;
                  cursor: pointer;
                  letter-spacing: 2px;
                  padding: 5px;
                  font-weight: 600;
                  margin-left: 15px;
                  user-select: none;
              }
              .ad:hover
              {
                  /*transition: color 0.1s ease-in-out, border-color 0.1s ease-in-out;*/
                  color: #00B4FF;
                  border-color: #00B4FF;
              }
  
              .number
              {
                  user-select: none;
                  color: #00B4FF;
                  font-size: 20px;
                  margin-left: 10px;
              }
              .number
              {
                  user-select: none;
                  color: #00B4FF;
                  font-size: 20px;
                  margin-left: 10px;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class=&quot;selectionlist&quot;&gt;
              &lt;ol&gt;
                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;TEXT&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;TEXT&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;TEXT&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;TEXT&lt;/a&gt;&lt;/li&gt;
              &lt;/ol&gt;
          &lt;/div&gt;
          &lt;div class=&quot;hea&quot;&gt;
              &lt;span class=&quot;tg&quot;&gt;TEXT&lt;/span&gt; 
              &lt;div id=&quot;name&quot;&gt;TEXT&lt;/div&gt;
              &lt;div class=&quot;ad&quot;&gt;TEXT&lt;/div&gt;
              &lt;div class=&quot;number&quot;&gt;TEXT&lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>