Новый вид опрокидывания, где якорь меньше изображения, используя CSS?

Question

Я работаю на опрокидывание эффект ссылки на мой сайт, чтобы достичь следующего:

┌────────────────────────────┐ 
│ ┌──────────────────┐  │ 
│ │ <a>    │  │ 
│ └──────────────────┘  │ 
│       │ 
│     <img>  │ 
└────────────────────────────┘ 

Я хочу, чтобы фоновое изображение, <img>, появляются при наведении указателя мыши только по ссылке, <a>. Другими словами, когда часть ссылки зависнет, я хочу, чтобы изображение за ней отображалось (или меняло состояние), не становясь «кликабельным». И я хотел бы сделать это только с CSS.

Я не использовать общий CSS фон/спрайт подход, потому что), независимо от того, как я отметил это, если <img> был где-нибудь в пределах <a> тега, весь образ стал «кликабельны», как только выяснилось, , и B) Я хотел использовать более качественные изображения, и в их числе в HTML избегали использования Javascript или браузеров для предварительной загрузки.

Мое решение было поставить <a> и <img> в пределах родительского <li> (так как это, по существу, часть «меню» или навигации по сайту), а затем использовать смежный селектор родственный (+), чтобы сделать <img> изменение, когда <a> завис над. В это самое основное, то CSS выглядит следующим образом:

li { 
    size and position declarations; /*The size is the same as the contained image.*/ 
} 

li a { 
    absolute size and position declarations for the link area; 
    z-index: 2; /*I use the z index to make sure the link stays above the image.*/ 
} 

li img { 
    absolute size and position declarations for the image; 
    z-index: 1; 
    display: none; 

li a:hover + img { 
    display: block; 
} 

И основной HTML выглядит следующим образом:

<ul> 
    <li><a href="page.htm"> </a><img src="image.jpg"></li> 
    <li>... 
</ul> 

Если вы хотите, чтобы увидеть его в действии, у меня есть тестовая версия вверх на www.joshuakirby.net/test (будьте нежны - я самоучкой, и я с готовностью признаю, что я не специалист по кодированию). Он отлично работает во всех основных браузерах, которые я пробовал, кроме IE. Я не получил его работать должным образом в любой версии IE, даже в IE9. Мерцание опрокидывания, похожее на спрайты, было в IE6, и ссылка не всегда доступна при первой или даже второй попытке.

Кто-нибудь знает, почему IE дает мне горе с этим? Есть ли какое-то исправление, чтобы сделать IE таким CSS, как остальные браузеры? Или, если весь метод, который я придумал, - это дерьмо, может ли кто-нибудь подумать о более кросс-браузерном дружественном, элегантном способе сделать этот опрокидывание с помощью CSS?

Я не новичок в веб-дизайне, и я также могу заняться JS и PHP, если нужно. Идея сделать все это с помощью CSS просто понравилась мне. Заранее спасибо за вашу помощь!

Answer 1

Мерцание вызвано тем, что IE, похоже, не уважает значения z-индекса ссылки, когда у него нет содержимого. Однако, если вы установите фон ссылок (например, #craftsLink a) на прозрачное изображение png, похоже, исправить проблему & сайт работает в IE7 +.

Answer 2

Будет что-то вроде этой работы?

http://jsfiddle.net/lazerblade01/CAhuy/

Вы можете добавить изображение в качестве фонового изображения в DIV вместо цвета, очевидно.

EDIT: только что протестирован в IE9 (единственная версия IE, к которой я имею доступ, без загрузки другого компьютера). Фоновый цвет работает без мерцания. Дайте мне знать, работает ли это для изображения.