Стиль активной кнопки. Проблемы с заменой канртинки

[Jo_Sky]

Здравствуйте! Возникла небольшая проблема с вёрсткой.

 

 

Есть html:

<div class="best">  

 

<div class="slider">
<img src="img/food.png">
</div>

 

</div>

 

Есть css:

.slider:active > img

{

background-image: url("../img/block.png")

}

 

Моя цель, чтобы на картинку, которая из html загружался сферху фон из css (block.png) по клику. 

 

Но выходит так, что фон (block.png) загружается за картинкой из html (food.png) и ощущение, что ничего не происходит. 

[afdw]

<div class="best">

<div class="slider">

<div></div>

</div>

</div>

.slider > div

{

background-image: url("../img/food.png")

}

.slider:active > div

{

background-image: url("../img/block.png")

}

[Jo_Sky]

<div class="best">   <div class="slider"><div></div></div> </div>

.slider > div{background-image: url("../img/food.png")}.slider:active > div{background-image: url("../img/block.png")}

Спасибо за ответ! Но, к сожалению, мне необходимо хранить ссылку на картинку именно в html.

Может быть есть ещё какие-нибудь мысли или идеи?

[Veseloff]

Две картинки и display на hover

[Jo_Sky]

Две картинки и display на hover

Могли бы Вы мне показать пример, пожалуйста?

[Veseloff]

http://jsfiddle.net/bhhkj/2/

[Jo_Sky]

http://jsfiddle.net/bhhkj/2/

И один маленький момент. Мне необходимо, чтобы картинка менялась по клику. Однако заменив hover на active данный пример перестал работать.

[Jo_Sky]

Хотя, это не столь важно hover или active. Больше хотелось бы, чтобы вторая картинка просто всавлялась сверху, а не заменялась.

[afdw]

http://jsfiddle.net/2CFN8/