html - 将鼠标悬停在列表链接上时，ul li 元素符号点图像不起作用

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 将列表图像应用到没有可用属性的 anchor 链接。所以悬停必须在列表项本身上。