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

时间:2014-08-17 06:26:20

标签: html css list background

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

但在悬停时,列表项目符号部分(包括透明箭头图像)的背景颜色未更改:

enter image description here

我想这样:

enter image description here

JSFilddle

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

7 个答案:

答案 0 :(得分:5)

使用:

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

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

答案 1 :(得分:3)

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

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/

答案 2 :(得分:1)

我会通过背景图片

来做

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

答案 3 :(得分:1)

我是这样做的。

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

答案 4 :(得分:0)

检查这个小提琴:

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

答案 5 :(得分:0)

使用list-style-position: inside;

答案 6 :(得分:0)

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

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