CODEWITHSUNDEEP
htmlcsslisthtml-lists
user3760941
user3760941

Reputation: 528

ul li bullet point image doesn't work with when hovering over list links

i want to make it so that when I hover the cursor over a link in the list, a bullet point image shows up to the left of the list text. however, it does not seem to work.

I've also tried the following CSS and it does not work:

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

any ideas? thanks

Current 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>

Upvotes: 2

Views: 1299

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 106038

If you want to display a bullet aside <a> , you need to reset display of <a> to list-item. Then , on hover you may switched bullet image from a transparent one to an arrow or so.

CSS example and DEMO:

ul.navibox li a:link {
    color:#ff0;
    text-decoration:none;
    display:list-item;
    list-style-position:inside;
    list-style-image:url(http://dummyimage.com/16x16/fff/fff&text=);
}
ul.navibox li a:visited {
    color:#f00;
}
ul.navibox li a:hover {
    color:#f0f;
    list-style-image:url(http://dummyimage.com/16x16/fff/000&text=->);
}

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 115289

Without a Demo being provided it's hard to be sure but I would try this

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

Your previous CSS applied the list image to the anchor link which doesn't have that property available to it. So the hover has to be on the list item itself.

Upvotes: 1

Related Questions