[英]How to change background color of list item image bullet?
我有一个这个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>
但在悬停时,列表项目符号部分(包括透明箭头图像)的背景颜色未更改:
我想这样:
如何更改列表项的项目符号部分的背景颜色?
采用 :
li{
list-style-image:url();
list-style-position: inside;
}
请参阅: http : //jsfiddle.net/pqf1stam/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/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;
}
我是这样做的。
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;
}
检查这个小提琴:
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; }
使用list-style-position: inside;
如果您使用此代码,则无需在图像目录之外调用图像。 在这里你可以使用项目图像子弹作为背景图像。 请参阅代码。
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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.