jQuery widget smoothDivScroll right Hot Spot not scrolling, only easing on mouseout
<p>I'm having an issue with smoothDivScroll (<a href="http://www.smoothdivscroll.com/" rel="nofollow">http://www.smoothdivscroll.com/</a>).  The left hot spot works fine; however the right hot spot does nothing on mouseover but does honor the ease out (i.e. I set <code>easingAfterHotSpotScrollingDistance: 100</code> and on mouseout it jumps that much).  I added a console.log() to smoothDivScroll-1.2.js to log mouseover and mouseout and they are firing at the right times.</p>

<p>Also, please note the image below: If I add width: 10% to the right hot spot, the background image is pushed to the left and the white space to the right of the image works fine on mouseover, but mousing over the area of the background image does not.
<img src="http://i.stack.imgur.com/i8o9o.gif" alt="Scroller"></p>

<p>Please see code below:</p>

<p>HTML after smoothDivScroll() is called:</p>

<pre><code>&lt;ul class="quicktabs-tabs quicktabs-style-nostyle"&gt;
  &lt;div class="scrollingHotSpotLeft scrollingHotSpotLeftVisible" style=""&gt;&lt;/div&gt;
  &lt;div class="scrollingHotSpotRight scrollingHotSpotRightVisible" style=""&gt;&lt;/div&gt;
  &lt;div class="scrollWrapper"&gt;
    &lt;div class="scrollableArea" style="width: 1173px; "&gt;
      &lt;li class="active first"&gt;&lt;a href="/drupal-7.14/general?qt-view__show_history__block=0#qt-view__show_history__block" id="quicktabs-tab-view__show_history__block-0" class="active quicktabs-loaded jquery-once-2-processed"&gt;1972&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/drupal-7.14/general?qt-view__show_history__block=1#qt-view__show_history__block" id="quicktabs-tab-view__show_history__block-1" class="active jquery-once-2-processed"&gt;1984&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/drupal-7.14/general?qt-view__show_history__block=2#qt-view__show_history__block" id="quicktabs-tab-view__show_history__block-2" class="active jquery-once-2-processed"&gt;1991&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/drupal-7.14/general?qt-view__show_history__block=3#qt-view__show_history__block" id="quicktabs-tab-view__show_history__block-3" class="active jquery-once-2-processed"&gt;1994&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/drupal-7.14/general?qt-view__show_history__block=4#qt-view__show_history__block" id="quicktabs-tab-view__show_history__block-4" class="active jquery-once-2-processed"&gt;1996&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/drupal-7.14/general?qt-view__show_history__block=5#qt-view__show_history__block" id="quicktabs-tab-view__show_history__block-5" class="active jquery-once-2-processed"&gt;1997&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/drupal-7.14/general?qt-view__show_history__block=6#qt-view__show_history__block" id="quicktabs-tab-view__show_history__block-6" class="active jquery-once-2-processed"&gt;1998&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/drupal-7.14/general?qt-view__show_history__block=7#qt-view__show_history__block" id="quicktabs-tab-view__show_history__block-7" class="active jquery-once-2-processed"&gt;2000&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/drupal-7.14/general?qt-view__show_history__block=8#qt-view__show_history__block" id="quicktabs-tab-view__show_history__block-8" class="active jquery-once-2-processed"&gt;2001&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/drupal-7.14/general?qt-view__show_history__block=9#qt-view__show_history__block" id="quicktabs-tab-view__show_history__block-9" class="active jquery-once-2-processed"&gt;2002&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/drupal-7.14/general?qt-view__show_history__block=10#qt-view__show_history__block" id="quicktabs-tab-view__show_history__block-10" class="active jquery-once-2-processed"&gt;2003&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/drupal-7.14/general?qt-view__show_history__block=11#qt-view__show_history__block" id="quicktabs-tab-view__show_history__block-11" class="active jquery-once-2-processed"&gt;2004&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/drupal-7.14/general?qt-view__show_history__block=12#qt-view__show_history__block" id="quicktabs-tab-view__show_history__block-12" class="active jquery-once-2-processed"&gt;2005&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/drupal-7.14/general?qt-view__show_history__block=13#qt-view__show_history__block" id="quicktabs-tab-view__show_history__block-13" class="active jquery-once-2-processed"&gt;2006&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/drupal-7.14/general?qt-view__show_history__block=14#qt-view__show_history__block" id="quicktabs-tab-view__show_history__block-14" class="active jquery-once-2-processed"&gt;2008&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/drupal-7.14/general?qt-view__show_history__block=15#qt-view__show_history__block" id="quicktabs-tab-view__show_history__block-15" class="active jquery-once-2-processed"&gt;2011&lt;/a&gt;&lt;/li&gt;
      &lt;li class="last"&gt;&lt;a href="/drupal-7.14/general?qt-view__show_history__block=16#qt-view__show_history__block" id="quicktabs-tab-view__show_history__block-16" class="active jquery-once-2-processed"&gt;2012&lt;/a&gt;&lt;/li&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/ul&gt;
</code></pre>

<p>Javascript:</p>

<pre><code>jQuery(document).ready(function($){
    $(".quicktabs-tabs").smoothDivScroll({
      mousewheelScrolling: true,
      visibleHotSpotBackgrounds: 'always',
      hotSpotScrollingStep:1,
      hotSpotScrollingInterval:15,
      autoScrollingMode: "",
      manualContinuousScrolling: true,
      easingAfterHotSpotScrollingDistance: 100,
    });
  });
</code></pre>

<p>CSS:</p>

<pre><code>.scrollingHotSpotLeft {
position: absolute;
left: 0;
width: 90px;
height: 106px;
background: transparent url(../img/show-history-arrow_sprite.gif) 0 -110px no-repeat;
}
.scrollingHotSpotRight {
  position: absolute;
  z-index: 99;
  right: 0;
  width: 90px;
  height: 106px;
  background-image: url(../img/show-history-arrow_sprite.gif) no-repeat;
    background-repeat: no-repeat;
    background-position: 47px 0;
}
div.scrollWrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

div.scrollableArea {
  position: relative;
  width: auto;
  height: 100%;
}
</code></pre>
