title: How to change background color of list item image bullet?
body: <p>I have a list with this CSS:</p>
  
  <pre><code>li
  {
      list-style-image: url('../img/arrow.gif');
  }
  li:hover
  {
      background-color:#E2E1D6;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;Semantic Web&lt;/li&gt;
      &lt;li&gt; Web 2.0&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>but on hover, background color of list bullet section (including transparent arrow image) not changed:</p>
  
  <p><img src="https://i.stack.imgur.com/4UYaU.png" alt="enter image description here"></p>
  
  <p>I want like this:</p>
  
  <p><img src="https://i.stack.imgur.com/DnkkH.png" alt="enter image description here"></p>
  
  <p><strong><a href="http://jsfiddle.net/pqf1stam/" rel="nofollow noreferrer">JSFilddle</a></strong></p>
  
  <p>How can I change background color of bullet section of list item?</p>