title: Rails styles persisting between pages
body: <p>I'm creating a book-reading app. Every book <code>has_many</code> pages. I have links going from one page to the next by clicking on the left and right halves of the pages. When you hover over the edge of the page, a div (acting as a link) floating over the page changes its opacity as an indicator that there is another page. These divs are <code>img-prev</code> and <code>img-next</code></p>
  
  <p>Here's an example of the hover effect on the right-half of the page:
  <a href="https://i.stack.imgur.com/dhKmo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dhKmo.png" alt="Example of the hover effect"></a></p>
  
  <p>The problem is that after clicking to the next (or previous) page, the opacity of the subsequent <code>img-prev</code> or <code>img-next</code> div for that new page is <em>very briefly</em> still its "dark" color, before changing back to fully transparent. I have a feeling this has to do with turbolinks, but I am not sure.</p>
  
  <p><strong>app/views/pages/show.html.erb</strong></p>
  
  <pre class="lang-rb prettyprint-override"><code>    &lt;%= stylesheet_link_tag 'pages' %&gt;
  
      &lt;div id="div-image-wrapper"&gt;
        &lt;% if @page.picture.attached? %&gt;
  
          &lt;% if @page.previous_page.present? %&gt;
            &lt;%= link_to @page.previous_page do %&gt;
              &lt;div id="img-prev"&gt;&lt;/div&gt;
            &lt;% end %&gt;
          &lt;% end %&gt;
  
          &lt;%= image_tag @page.picture, class: "img-fluid", id: "img-page" %&gt;
  
          &lt;% if @page.next_page.present? %&gt;
            &lt;%= link_to @page.next_page do %&gt;
              &lt;div id="img-next"&gt;&lt;/div&gt;
            &lt;% end %&gt;
          &lt;% end %&gt;
  
        &lt;% end %&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>app/assets/stylesheets/pages.scss</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>    #container-main {
        max-width: 100vw;
        text-align: center;
      }
  
      #div-image-wrapper {
        position: relative;
        display: inline-block;
      }
  
      #img-prev {
        background-color: black;
        position: absolute;
        opacity: 0.0;
        width: 50%;
        height: 100%;
        top: 0;
        left: 0;
      }
  
      #img-next {
        background-color: black;
        position: absolute;
        opacity: 0.0;
        width: 50%;
        height: 100%;
        top: 0;
        right: 0;
      }
  
      #img-page {
        max-height: 80vh;
      }
  </code></pre>
  
  <p><strong>app/assets/javascripts/pages.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>    $(document).on('turbolinks:load', function() {
          if ($('#img-prev').length) {
              $('#img-prev').hover(function() {
                  $(this).fadeTo(300, 0.3);
              }, function() {
                  $(this).fadeTo(300, 0);
              });
          }
  
          if ($('#img-next').length) {
              $('#img-next').hover(function() {
                  $(this).fadeTo(300, 0.3);
              }, function() {
                  $(this).fadeTo(300, 0);
              });
          }
      });
  </code></pre>
  
  <p>The only clue I have is that if I force my <code>img-prev</code> and <code>img-next</code> links to ignore turbolinks, the problem goes away, but a full page refresh is done on every page which is less than ideal. The code for that looks like this:</p>
  
  <p><strong>app/views/pages/show.html.erb (alternate)</strong></p>
  
  <pre class="lang-rb prettyprint-override"><code>    &lt;%= stylesheet_link_tag 'pages' %&gt;
  
      &lt;div id="div-image-wrapper"&gt;
        &lt;% if @page.picture.attached? %&gt;
  
          &lt;% if @page.previous_page.present? %&gt;
            &lt;%= link_to @page.previous_page, "data-turbolinks": false do %&gt;
              &lt;div id="img-prev"&gt;&lt;/div&gt;
            &lt;% end %&gt;
          &lt;% end %&gt;
  
          &lt;%= image_tag @page.picture, class: "img-fluid", id: "img-page" %&gt;
  
          &lt;% if @page.next_page.present? %&gt;
            &lt;%= link_to @page.next_page, "data-turbolinks": false do %&gt;
              &lt;div id="img-next"&gt;&lt;/div&gt;
            &lt;% end %&gt;
          &lt;% end %&gt;
  
        &lt;% end %&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Not sure if it is relevant, but I should mention I have this line added to my <strong>config/initializers/assets.rb</strong>:</p>
  
  <pre class="lang-rb prettyprint-override"><code>Rails.application.config.assets.precompile += %w( pages.css )
  </code></pre>
  
  <p>Also, the full sourcecode of this application can be found here on my Github:
  <a href="https://github.com/tliss/lianhuanhua" rel="nofollow noreferrer">https://github.com/tliss/lianhuanhua</a></p>