title: Remove border when hover on item
body: <p>I want red border to be removed when hover on each item. </p>
  
  <p>As you can see from the <a href="https://jsfiddle.net/lilpenguin/7bmv2aej/10/" rel="nofollow noreferrer">jsFiddle</a> that I've attached here. It only worked on the first div on left, and also the rest of the div on the right.</p>
  
  <p>The reason I do it this way is because I want it to be flexible so that I can add or remove on HTML without affecting CSS part.</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>.wrapper {
    height: 100px;
    display: flex;
    background-color: lightblue;
  }
  .item {
    background-color: lightgreen;
    flex: 0 0 15%;
  }
  .item-left + .item-right {
    margin-left: auto;
  }
  .item-left{
   border-left:1px solid red;
  }
  .item-left:first-of-type{
   border:none;
  }
  .item-left:last-of-type{
   border-right:1px solid red;
  }
  .item-right{
   border-left:1px solid red;
  }
  .item:hover{
   /* box-shadow: x y blur spread color; */
   box-shadow:0px 0px 0px -1px rgba(0, 0, 0, 0.2), 0px 0px 10px 0px rgba(0, 0, 0, 0.19);
   z-index:1;
  }
  .item:hover + .item.item-left, .item.item-right {
      border:none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="bottom" class="bottom"&gt;
    &lt;div class="wrapper"&gt;
      &lt;a class="item item-left"&gt;
        &lt;div class="item-label"&gt;Left&lt;/div&gt;
      &lt;/a&gt;
      &lt;a class="item item-left"&gt;
        &lt;div class="item-label"&gt;Left&lt;/div&gt;
      &lt;/a&gt;
      &lt;a class="item item-left"&gt;
        &lt;div class="item-label"&gt;Left&lt;/div&gt;
      &lt;/a&gt;
      &lt;a class="item item-right"&gt;
        &lt;div class="item-label"&gt;Right&lt;/div&gt;
      &lt;/a&gt;
      &lt;a class="item item-right"&gt;
        &lt;div class="item-label"&gt;Right&lt;/div&gt;
      &lt;/a&gt;
      &lt;a class="item item-right"&gt;
        &lt;div class="item-label"&gt;Right&lt;/div&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks for the help!</p>