title: Horizontal Scroll on hover / on click
body: <p>First of all thanks in advance for any help.</p>
  
  <p><strong>Case:</strong>
  I have multiple divs in one line. These divs are in a box and I'm able to scroll horizontally in this box to see the other divs.
  I've made two buttons (L for left and R for right) to scroll horizontally when hovering or clicking these buttons.</p>
  
  <p><strong>Problem:</strong>
  I've already tried with some CSS and JavaScript but I can't seem to get this right.</p>
  
  <p>Does anybody know how to achieve horizontal scroll when hovering / clicking on a button (or arrow)?</p>
  
  <p>I've made a fiddle: <a href="https://jsfiddle.net/wsemLhtz/" rel="nofollow">https://jsfiddle.net/wsemLhtz/</a></p>
  
  <p>Would be awesome to get this working with CSS only or simple JavaScript since I have to implement this into a Joomla system. I know there are some jQuery plug-ins out there but in Joomla I have to replace all $-tags with "jQuery" and it's quite annoying to do this in every file.</p>
  
  <p>Best regards.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.box-outer {
    width: 20rem;
    height: 6rem;
    position: relative;
  }
  
  .arrow-left {
    position: absolute;
    width: 2rem;
    height: 2rem;
    top: 1.5rem;
    left: 0rem;
    z-index: 1;
    background-color: yellow;
    border: 1px solid black;
  }
  
  .arrow-right {
    position: absolute;
    width: 2rem;
    height: 2rem;
    top: 1.5rem;
    right: 10rem;
    z-index: 1;
    background-color: yellow;
    border: 1px solid black;
  }
  
  .box-inner {
    width: 10rem;
    height: 6rem;
    position: absolute;
    white-space: nowrap;
    overflow-y: hidden;
    overflow-x: scroll;
  }
  
  .thumb {
    height: 5rem;
    width: 2rem;
    background-color: green;
    border: 1px solid black;
    display: inline-block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="box-outer"&gt;
    &lt;a class="arrow-left"&gt;L&lt;/a&gt;
    &lt;a class="arrow-right"&gt;R&lt;/a&gt;
    &lt;div class="box-inner"&gt;
      &lt;div class="thumb"&gt;&lt;/div&gt;
      &lt;div class="thumb"&gt;&lt;/div&gt;
      &lt;div class="thumb"&gt;&lt;/div&gt;
      &lt;div class="thumb"&gt;&lt;/div&gt;
      &lt;div class="thumb"&gt;&lt;/div&gt;
      &lt;div class="thumb"&gt;&lt;/div&gt;
      &lt;div class="thumb"&gt;&lt;/div&gt;
      &lt;div class="thumb"&gt;&lt;/div&gt;
      &lt;div class="thumb"&gt;&lt;/div&gt;
      &lt;div class="thumb"&gt;&lt;/div&gt;
      &lt;div class="thumb"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>