How can I set the dots on an unordered list and change them to images on hover

user_8604216 0
Viewed 372

I have tried to remove the bullet points in an unordered list using this CSS:

list-style-type:none

But how do I change them to images on hover?

like this

simple li:- https://prnt.sc/u8bml0

remove li douts:- https://prnt.sc/u8bml0

replace img like this:- https://prnt.sc/u8bnzd

hover to show like this:- https://prnt.sc/u8bnzd

My code is like this:

<ul style="list-style-type:none;">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>

This is the link to the image I would like the list's bullet points to be: https://www.flaticon.com/free-icon/coffee_3054889?term=coffee&page=1&position=2

This is what I'd like them to be on hover: https://www.flaticon.com/free-icon/coffee_2935500?term=coffee&page=1&position=9

I am just learning HTML and CSS.

css html
2 Answers

You'll replace the douts with image

ul {
  list-style-image: url('sqpurple.gif');
}

And hover to change li image

ul li:hover {
    list-style-image: url('roung.gif');
}
user_141923180 
<style>
ul {
  list-style-image: url('sqpurple.gif');
}
ul li:hover {
    list-style-image: url('roung.gif');
}
</style>
<ul style="list-style-type:none;">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>
user_139930080
Related