CODEWITHSUNDEEP
htmlcsslistbackground
Majid
Majid

Reputation: 14243

How to change background color of list item image bullet?

I have a list with this 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>

but on hover, background color of list bullet section (including transparent arrow image) not changed:

enter image description here

I want like this:

enter image description here

JSFilddle

How can I change background color of bullet section of list item?

Upvotes: 2

Views: 2762

Answers (7)

active-worker
active-worker

Reputation: 56

If you use this code, you don't need to call images form outside of your image directory. Here you could use item image bullet as background image. Please see the code.

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

Demo: https://dl.dropboxusercontent.com/u/211935016/list_bullet/index.html

Upvotes: 0

Md. Salahuddin
Md. Salahuddin

Reputation: 1072

I did it this way.

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

Upvotes: 1

Kevin Lynch
Kevin Lynch

Reputation: 24703

i would do it via background image

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

Upvotes: 1

Khaleel
Khaleel

Reputation: 1371

use list-style-position: inside;

Upvotes: 0

Ronak Jain
Ronak Jain

Reputation: 3348

Use :

li{
list-style-image:url();
list-style-position: inside;
}

See: http://jsfiddle.net/pqf1stam/2/

Upvotes: 7

sravis
sravis

Reputation: 3680

Check this fiddle:

http://jsfiddle.net/HequH/

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

Upvotes: 0

Halil Bilgin
Halil Bilgin

Reputation: 513

You can add the bullet as a background image.

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/pqf1stam/1/

Upvotes: 3

Related Questions