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

Question

我有一个包含此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>

但在悬停时，列表项目符号部分（包括透明箭头图像）的背景颜色未更改：

我想这样：

JSFilddle

如何更改列表项的项目符号部分的背景颜色？

Answer 1

使用：

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

请参阅：http://jsfiddle.net/pqf1stam/2/

Answer 2

您可以将项目符号添加为背景图像。

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

我会通过背景图片

来做

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

我是这样做的。

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

检查这个小提琴：

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

如果您使用此代码，则无需在图像目录之外调用图像。在这里你可以使用项目图像子弹作为背景图像。请参阅代码。

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;
    }

演示：https://dl.dropboxusercontent.com/u/211935016/list_bullet/index.html