CODEWITHSUNDEEP
css
Jask
Jask

Reputation: 680

Show gray image on hover over div, color image on hover over gray image

I want do something like this:
Show text in div, on hover show gray image next to text
and on hover over gray image show color image.

here's what i done sofar:

HTML:

<div class='line'>text text 1<a href='#1'><div class='image'>
</div></a></div>

<div class='line'>text text 2<a href='#2'><div class='image'>
</div></a></div>

CSS

.image                  { visibility:hidden; height:48px;width:48px;background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSZP-OED3SNXR6bzDbYbAxQUUBIobAu60g1Ft9Wapv_ysUd37ANcw);}
.line :hover .image       {visibility:visible;}     
.line .image:hover image        {background-image:     url(http://t2.gstatic.com/images?q=tbn:ANd9GcStjRtP8jtJNFLgnzWT-plN-JGLLb0L4ZSD4wqKksAs517dvj_rSA);}

http://jsfiddle.net/UT56U/1/

Is it possible without jQuery or JS?

Upvotes: 1

Views: 631

Answers (1)

C3roe
C3roe

Reputation: 96306

Yes, it’s possible, but you have to use the right selectors.

.line :hover .image

The space between .line and :hover here would mean a descendant element of .line being hovered – so remove the space, to have it react on hover of .line itself.

.line .image:hover image

You have no .image element here that is itself a descendant of an .image, so this selector does not apply as well. Make that .line .image:hover instead.

http://jsfiddle.net/UT56U/2/

Upvotes: 2

Related Questions