-2

I need some help with CSS. I am trying to create a tree with lots of <ul> and <li> tags. The problem is that I have many <li> tags with a particular class, and inside that list I have an <img> tag.

How can I access that <img> tag and put different background image? I am confused how to point my <img> tag with the class of the <li> and then set a background-image.

Note: CSS3 is not allowed

<ul>
  <li class="leaf"><img></li>
  <li class="leafhidden"><img></li>
  <li class="leafhidden"><img></li>
</ul>

Thank You

user3307470
  • 1
  • 3

5 Answers5

1

This code will go inside .leaf and look for the img tag, then change the picture:

.leaf img:hover {
    content:url('http://rookery.s3.amazonaws.com/941000/941430_96b2_625x1000.jpg');
}

I made a fiddle for you: http://jsfiddle.net/3DXD2/

  • The [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content) attribute and the [`:hover`](https://developer.mozilla.org/en-US/docs/Web/CSS/:hover) are both from CSS 2 which enjoys [rather broad support](http://caniuse.com/css-sel2). More importantly it is the right tool for this job. – Jason Sperske Feb 13 '14 at 23:13
  • @user3307470 `content is part of css3` It's a part of CSS Level 2. In fact `content` property for the `img` is only working on Webkit / Google Chrome. similar topic on SO: http://stackoverflow.com/questions/18032220/css-change-image-src-on-imghover – Hashem Qolami Feb 13 '14 at 23:19
  • @user3307470 Why don't you want to use CSS3? It is a very useful update of CSS. Many good features. –  Feb 14 '14 at 17:54
0
ul li.leaf img {background:url(/images/img.jpg);}    
ul li.leafhidden img {background:url(/images/img2.jpg);}
httpgio
  • 127
  • 6
  • Sir I think it should be background-image, but still not working – user3307470 Feb 13 '14 at 23:05
  • doesn't need to be background-image, background has shorthand code so it will work like that. It's not working because you are giving img a background image.. take the images out, define width and height on li, and give background images to the li's – httpgio Feb 13 '14 at 23:07
  • remove img from your markup and assign the li's the background image – httpgio Feb 13 '14 at 23:07
  • no Sir... i need this to do this kind of codeing..really need ur help – user3307470 Feb 13 '14 at 23:09
0

Use a descendant combinator.

.leaf img {
    background-image: url('leaf.png');
}

This won't do anything visible unless the image is translucent.

That said, it looks like you are trying to specify content images using CSS. Don't do that. Use a src attribute (and add an appropriate alt attribute).

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
0

The only way to get this to work with CSS using background on the img is the following:

DEMO

.leaf > img {
    background: url(http://placekitten.com/200/200) no-repeat;
    width: 200px;
    height: 200px;
}

Because the img and li tags are both empty, nothing will show up when a background is declared to either of them. So you have to specify a width and height.

brouxhaha
  • 4,003
  • 1
  • 19
  • 22
-1

As simple as that:

ul li img { /*do your styling here*/ }

Edit:

Missed a point about classes:

ul li.leaf img { /*do your styling here*/ }
Morpheus
  • 8,829
  • 13
  • 51
  • 77