Question

我想这样做，当我将光标悬停在列表中的链接上时，子弹点图像显示在列表文本的左侧。但是，它似乎不起作用。

我还尝试了以下CSS，但它不起作用：

ul.navibox a:hover{
list-style-image:url(images/crown-icon.jpg);}

任何想法？感谢

当前的CSS：

ul.navibox{
margin:0 0 0 0;
padding:5px 0 0 20px;
list-style-type:none;
font-family:arial,verdana,helvetica,sans-serif;
font-size:14px;
color:#333333;}

ul.navibox li a:link{
color:#ff0;
text-decoration:none;}

ul.navibox li a:visited{
color:#f00;}

ul.navibox li a:hover{
color:#f0f;
list-style-image:url(images/crown-icon.jpg);}

HTML：

<div id="middle_left_box"><span style="padding-left:10px">Categories</span>
<h3>accessories</h3>
<h4>Supplies:</h4>
<ul class="navibox">
<li>Pellets</li>
<li>Gas</li>
<ul>
</div>

Answer 1

如果没有提供演示，很难确定，但我会尝试这个

ul.navibox{
margin:0 0 0 0;
padding:5px 0 0 20px;
list-style-image:none; /* default 'non-image' */
font-family:arial,verdana,helvetica,sans-serif;
font-size:14px;
color:#333333;}

ul.navibox li:hover{
list-style-image:url(images/crown-icon.jpg);}

ul.navibox li a:link{
color:#ff0;
text-decoration:none;}

ul.navibox li a:visited{
color:#f00;}

ul.navibox li a:hover{
color:#f0f;
}

您之前的CSS将列表图像应用于锚链接，该链接没有该属性可用。所以悬停必须在列表项本身上。

Answer 2

如果您要在<a>旁边显示子弹，则需要将display的{{1}}重置为<a>。然后，在悬停时，您可以将子弹图像从透明图像切换为箭头左右。

CSS示例和 DEMO ：

list-item

当鼠标悬停在列表链接上时，ul li项目符号图像不起作用

2 个答案: