Смена изображения при наведении

[Feers1de]

Всем привет!

У меня имеется элемент, к которому прикреплено изображение в "чёрно-белом формате". При наведении на него мне необходимо, чтобы изображение менялось на "жёлтый формат". Пробовал через :hover - что-то не получается.

CSS код:

#fdct:hover {
	position: relative;
	width: 256px;
	height: 256px;
	background-image: url('fdct2.png');
	-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
}
#fdct {
	position: relative;
	width: 256px;
	height: 256px;
	background-image: url('fdct1.png');
	-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
}
#fdct:before, #fdct:after {
	position: absolute;
	width: 40%;
	height: 10px;
	content: ' ';
	left: 12px;
	bottom: 12px;
	background: transparent;
	-webkit-transform: skew(-5deg) rotate(-5deg);
	-moz-transform: skew(-5deg) rotate(-5deg);
	-ms-transform: skew(-5deg) rotate(-5deg);
	-o-transform: skew(-5deg) rotate(-5deg);
	transform: skew(-5deg) rotate(-5deg);
	-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	z-index: -1;
}
#fdct:after {
	left: auto;
	right: 12px;
	-webkit-transform: skew(5deg) rotate(5deg);
	-moz-transform: skew(5deg) rotate(5deg);
	-ms-transform: skew(5deg) rotate(5deg);
	-o-transform: skew(5deg) rotate(5deg);
	transform: skew(5deg) rotate(5deg);
}

HTML код (в PHP файле):

<div id="fdct">
</div>

Edited September 26, 2012 by Feers1de

[Catherine]

background-color: url('fdct2.png');

уверены?

[Feers1de]

Вот чёрт, не доглядел.

Но все равно почему-то не появляется...

p.s. Первый пост обновил.

[lobanov_kirill_]

адрес до картинки правильный?

[Feers1de]

адрес до картинки правильный?

Да. Первое изображение там же находится.

[lobanov_kirill_]

Я никогда не применял :hover к блокам, всегда только к ссылкам. Через jquery :hover пройдет. Попробуйте сделать ссылку на весь блок и прописать #fdct а:hover так 100% будет работать

[Feers1de]

Знать бы этот JQuery...

[lobanov_kirill_]

Знать бы этот JQuery...

Я учился вот по этому курсу http://1popov.ru/webcourses2012/disc11 очень подробно рассказывает!

[Catherine]

Вот чёрт, не доглядел.

Но все равно почему-то не появляется...

p.s. Первый пост обновил.

Код из первого поста. Все работает.

[Feers1de]

Извиняюсь, это мой косяк. Я оказывается одно и то же изображение скинул в директорию, только под другим именем.

p.s. Всем спасибо за оказанную помощь!

Edited September 26, 2012 by Feers1de

[hedgehog]

Я никогда не применял :hover к блокам, всегда только к ссылкам.

потому что любимый браузер - ие6?