title: Error on hover in span with text-shadow sibling node in Chrome
body: <p>I was experience a problem with the following code. I have a <strong>spoiler</strong> button who show a <em>spoiler text</em> that initially is showed with text-shadow to hide the content. </p>
  
  <p>In Chrome, when I put the cursor over the <strong>spoiler button</strong>, it doesn't work well as you can see, it's difficult to click to show the spoiler. </p>
  
  <p>If I remove the text-shadow property from <strong>span.show-spoiler-text</strong> it works ok.</p>
  
  <p>I think this only happen in Webkit navigators, because I tried in Firefox and works perfectly.</p>
  
  <p>How could I fix it?</p>
  
  <p>Thank you in advance.</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-js lang-js prettyprint-override"><code>$(function()
    {
  $("span.spoiler-text .show-spoiler-text").click(function() {
    var show_spoiler = $(this);
  
    var spoiler = show_spoiler.closest('span.spoiler-text');
  
    if (spoiler.hasClass('showing')) {
      spoiler.removeClass("showing");
    } else {
      spoiler.addClass("showing");
    }
  });
    });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>span.show-spoiler-text {
      background: #610B0B;
      color: white;
      text-transform: uppercase;
      font-size: 10px;
      padding: 5px;
      border-radius: 5px;
      margin-right: 5px;
      cursor: pointer; 
      text-shadow: 0 0 0px #610B0B;
  }
  
  span.show-spoiler-text:hover, .spoiler-text.showing span.show-spoiler-text { 
      font-weight: bold;   
  }
  
  .spoiler-text .spoiler-text-content {
      text-shadow: 0 0 15px #610B0B;
      color: transparent;
       -webkit-transition: text-shadow 0.2s linear;
      -moz-transition: text-shadow 0.2s linear;
      -ms-transition: text-shadow 0.2s linear;
      -o-transition: text-shadow 0.2s linear;
      transition: text-shadow 0.2s linear;
  }
  
  .spoiler-text.showing .spoiler-text-content
  {
     text-shadow: 0 0 0px #610B0B;
     color: #610B0B;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
   &lt;p class="entry-text"&gt;Lorem ipsum dolor &lt;span class="spoiler-text"&gt;&lt;span class="show-spoiler-text"&gt;Spoiler&lt;/span&gt;&lt;span class="spoiler-text-content"&gt; sit amet, consectetur adipiscing elit. Nullam luctus eu felis tristique facilisis. Nullam ut tristique tortor, vel varius tortor.&lt;/span&gt;&lt;/span&gt;Nullam nibh nunc, ultricies at luctus quis, sodales posuere risus. Proin sagittis consectetur neque, ut laoreet nibh fringilla sit amet. Quisque tempor metus erat, at blandit mi rhoncus a. Mauris elementum mollis mollis. Quisque sit amet sollicitudin tortor, id aliquet mi. Donec convallis elit nec turpis volutpat, quis ornare leo lacinia. Proin dictum at mauris et tincidunt. Integer semper sed massa non tincidunt. Fusce facilisis, tellus vitae rhoncus aliquam, mi felis cursus tortor, non finibus augue ligula id enim. Sed ullamcorper enim quis pharetra sagittis.&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>