title: Create an arrow with a mouseover effect
body: <p>I'd like to create a simple arrow with a mouseover effect. I create a span and a triangle. But now I need a mouseover effect which should apply to the whole arrow. Any Idea? I put my Sourcetext in a fiddle.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;span id="series" class="rectangle"&gt;&lt;/span&gt;
  &lt;div class="series-triangle"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#series { 
      width: 60px;
  }
  
  .series-triangle{
      float:left;
      width: 0px;
      position: relative;
  }
  
  .series-triangle:after {
      content: '';
      position: absolute;
      top: 3px;
      left: -3px;
      width: 0;
      height: 0;
      border-color: transparent transparent transparent #EFDF00;
      border-style: solid;
      border-width: 31px;
  }
  
  .series-triangle:before {
      content: '';
      position: absolute;
      top: 1px;
      left: -2px;
      width: 10;
      height: 10;
      border-color: transparent transparent transparent #444;
      border-style: solid;
      border-width: 33px;
  }
  
  .series-triangle:hover {
      background-color: white;
  }
  
  .rectangle {
      float:left;
      height: 60px;
      border: 2px solid #444;
      padding: 2px;
      text-align: center;
      border-radius: 5px;
      background-color: #EFDF00;
  }
  
  .rectangle:hover { 
      background-color: white;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/u7tYE/8089/" rel="nofollow">http://jsfiddle.net/u7tYE/8089/</a></p>