如何更改列表项图像bullet的背景颜色？

Question

I have a list with this CSS:

li
{
    list-style-image: url('../img/arrow.gif');
}
li:hover
{
    background-color:#E2E1D6;
}

HTML:

<ul>
    <li>Semantic Web</li>
    <li> Web 2.0</li>
</ul>

but on hover, background color of list bullet section (including transparent arrow image) not changed:

I want like this:

JSFilddle

How can I change background color of bullet section of list item?

Answer 1

Use :

li{
list-style-image:url();
list-style-position: inside;
}

See: http://jsfiddle.net/pqf1stam/2/

Answer 2

You can add the bullet as a background image.

li
{
    background: url(http://x.majidr.ir/arrow.gif) no-repeat;
    padding-left:20px;
    list-style:none;
}
li:hover
{
    background-color:#E2E1D6;
}

http://jsfiddle.net/pqf1stam/1/

Answer 3

i would do it via background image

DEMO http://jsfiddle.net/david321312312231/pqf1stam/3/

li
{
    background: url('http://x.majidr.ir/arrow.gif') left center no-repeat;
    list-style-type: none;
    margin: 0;
    padding-left: 20px;
}
li:hover
{
    background-color:#E2E1D6;
}

Answer 4

I did it this way.

ul {
  list-style: none;
  padding:0;
  margin:0;
}

li
{
  background:url('../img/arrow.gif') top left no-repeat;
  padding-left:24px;
}

li:hover
{
  background-color:#E2E1D6;
}

Answer 5

Check this fiddle:

http://jsfiddle.net/HequH/

HTML:

<ul>
    <li><a href="test.html">Item 1</a></li>
    <li><a href="test2.html">Item 2</a></li>
    <li><a href="test3.html">Item 3</a></li>
</ul>

CSS:

ul { 
    list-style-image: url('https://www.gravatar.com/avatar/b9c1eafa90f9b895aff24750f7be1cbc?s=32&d=identicon&r=PG');
}

ul li:hover { 
    list-style-image: url('https://www.gravatar.com/avatar/459f72f7a692a760ddfd30340aac2901?s=32&d=identicon&r=PG&f=1');
}

li:hover a { color: #f00; }

Answer 6

使用list-style-position: inside;

Answer 7

If you use this code, you don't need to call images form outside of your image directory. Here you could use item image bullet as background image. Please see the code.

HTML:

  <ul>
      <li><a href="">Semantic Web</a></li>
      <li><a href="">Semantic Web</a></li>
      <li><a href="">Semantic Web</a></li>
      <li><a href="">Semantic Web</a></li>
      <li><a href="">Semantic Web</a></li>
 </ul>

CSS:

ul {
    margin:0;padding:0;list-style:none
   }
ul li {
    background-image: url("images/arrow1.gif");
    background-position: 0 5px;
    background-repeat: no-repeat;
    padding: 5px 5px 5px 25px;
    }
ul li:hover {
    background-color:#E2E1D6
    }
ul li a {
    color:#fff;text-decoration:none;display:inline-block;
    }
ul li a:hover {
    color:#fff;
    }

Demo: https://dl.dropboxusercontent.com/u/211935016/list_bullet/index.html