Картинка при наведении курсора на текст

[bios]

Хочу сделать таблицу, с перечнем запчастей, и их фото.

фото появляется при наведении на запчасть(на текст).

Реализовать решил на CSS

<style type="text/css">  

 .demo{  
 position: relative;  
 z-index: 0;
 }  

 .demo:hover{  
 background-color: transparent;  
 z-index: 50;
 }  

 .demo span{ /*CSS for enlarged image*/  
 position: absolute;  
 background-color: lightyellow;  
 padding: 5px;  
 left: -1000px;  
 border: 1px dashed gray;  
 visibility: hidden;  
 color: black;  
 text-decoration: none;  
 }  

 .demo span img{ /*CSS for enlarged image*/  
 border-width: 0;  
 padding: 2px; 
 }  

 .demo:hover span{ /*CSS for enlarged image on hover*/  
 position: fixed;
 visibility: visible;  
 top: 0;  
 left:0px; /*position where enlarged image should offset horizontally */  

 }  

 </style>

В таблицу вставляю это:

<td><a class="demo" href="#"></a><a class="demo" href="#">Наименование в ячейке<span><img src="адрес фото" border="0" /><br /> описание при фото</span></a></td>

Но что хочется поправить:

При наведении  появляется картинка, и она же остается если продолжить  водить курсором по самой картинке.

А хочется,чтобы картинка пропадала, как только курсор убирают с "Наименование в ячейке"

[aurfon]

Если что-то типа этого http://css-tricks.com/examples/SlideupBoxes/

то вам сюда http://css-tricks.com/video-screencasts/93-css3-slideup-boxes/

[bios]

Если что-то типа этого http://css-tricks.com/examples/SlideupBoxes/

то вам сюда http://css-tricks.com/video-screencasts/93-css3-slideup-boxes/

Нет,совсем по другому, Картинка всплывает при наведении на ссылку курсора.

А возможно ли добавить задержку, чтобы картинка появлялась не в сразу, а через пару секунд после удержания курсора на ссылке?

[Great Rash]

Без скрипта никак.

[alexandr_v-vich]

Без скрипта никак.

Нет, ну если уж ссылку на transition дали, почему нет то).

Синтаксис, если не ошибаюсь такой — transition: all(свойство) 2s(продолжительность) 1s(задержка); Но лучше проверить наверняка.

[Great Rash]

Нет, ну если уж ссылку на transition дали, почему нет то).

Меня почему-то на всех форумах игнорируют, но... у меня в Хроме (сборка обычная не девелоперская) не работают или работают очень криво все эти CSS3 транзишны. Т.е. постоянные глюны: то дергается, то пропадает кусками текст, то вообще блок пропадает. Вот например на хабре.

[bios]

Без скрипта никак.

Нет, ну если уж ссылку на transition дали, почему нет то).

Синтаксис, если не ошибаюсь такой — transition: all(свойство) 2s(продолжительность) 1s(задержка); Но лучше проверить наверняка.

Спасибо!

Добавил:

.demo span{ /*CSS for enlarged image*/  
 position: fixed;  
 background-color: lightyellow;  
 border: 1px dashed gray; 
 padding: 5px;  
 left: 5px; 
 top: 5px;
 visibility: hidden;  
 color: black;  
 text-decoration: none;
 -webkit-transition:  all 0.1s cubic-bezier;
 -webkit-transition-delay: 1s;      
 -moz-transition: all 0.1s cubic-bezier;
 -moz-transition-delay: 1s;      
 -o-transition: all 0.1s cubic-bezier;
 -o-transition-delay: 1s;      
 }  

В Хроме и мозиле картинка стала появятся с задержкой(как и требовалось).

Но в опере в сразу, и при этом, если убрать курсор, продолжает отображаться еще секунду=\

Edited April 19, 2012 by bios

[alexandr_v-vich]

bios, попробуйте задержку прописать нулевую (а наверное даже вообще не писать… ну для начала пусть нулевую). А на hover добавить её в 1 секунду.

И ещё. Незачем задержку прописывать отдельно. Пишите так

transition: all 0.1s cubic-bezier(здесь вставляйте значения, а лучше используйте стандартные функции) 1s(это задержка);

Great Rash, Чисто css, без js? А что за ОС?

Edited April 19, 2012 by alexandr_v-vich

[Great Rash]

Great Rash, Чисто css, без js? А что за ОС?

Win Vista. Чисто CSS и CSS+JS по всякому. Варианта два: или дикие тормоза, или глюны (пропадание и т.п.). А уж WebGL так вообще не работает. Ах да, видюха у меня встроенная (Intel по-моему), может в этом дело? В общем я теряюсь в догадках и очень настороженно отношусь к CSS-трансформациям и WebGL. Пока мое мнение такое - это недоработанная шняга.

[hedgehog]

Меня почему-то на всех форумах игнорируют, но... у меня в Хроме (сборка обычная не девелоперская) не работают или работают очень криво все эти CSS3 транзишны. Т.е. постоянные глюны: то дергается, то пропадает кусками текст, то вообще блок пропадает.

В хромиуме под кубунтой то работает, то не работает. Не поймешь. Вот на этом примере в лисе и опере все окей, а хромиум при наведении курсора сначала подвисает, потом вообще со страницей происходит невообразимое: часть чернеет, часть смещается. Может, конечно, это я что-то намудрил, так как до трансформов и транзишнов только-только добрался, но на страничке в посте выше происходит то же самое.

[Great Rash]

Хромиум я в расчет не беру. Это девелоперская ветка и она меня не интересует. А вот то что траблы в обычном Хроме расстраивает.

UPD:

вот так у меня в хроме

это только на последнем пункте, первые два работают вроде нормально

[alexandr_v-vich]

Great Rash,

Win Vista

Пока мое мнение такое - это недоработанная шняга.

Несвязанные вещи, не?)) Честно, я её и не пользовался никогда, но наслышан разного. Хотя как она повлиять может не имею понятия…

Странные вещи, странные… единственные (или частые) ответы на проблемы с WebGL встречал только на — да — видеокарту.

Просто сам ещё не сталкивался с таким отображением. У меня всегда как-то — или всё хорошо или IE…

hedgehog, так а в самом Хроме также?

[Great Rash]

Несвязанные вещи, не?))

Не думаю, что винда как то связана с отображением графики в браузере. А вот видюха... очень может быть. Но это еще большая пичалька, это что же получается, мне придется покупать новую видеокарту чтобы у меня сайты все отображались? Я вот просто думаю в какую кашу превратится интернет на моем компе если все поголовно начнут применять CSS-анимацию. Пока это на уровне экспериментов оно конечно меня не волнует...

[alexandr_v-vich]

Great Rash, а другие браузеры?

[Great Rash]

Кстати... ща позырим, чет я не догадался

Да, проблема в Хроме. ФФ показывает как надо. Позырил chrome://flags вроде экспериментальных функций не включено.

[alexandr_v-vich]

Да, проблема в Хроме. ФФ показывает как надо. Позырил chrome://flags вроде экспериментальных функций не включено.

Слушай, ну мне внутренний голос постоянно талдычит про Висту… я так-то редко его слушаю, но какой-то он настойчивый… сам-то я не знаю, при чём тут она, но этот голос…

Одна ОС стоит?

[Great Rash]

Одна. Не верю я в причастность операционки.

[alexandr_v-vich]

Ну, тем не менее, вероятней всего, в железе. А там я уже ничего не понимаю

А Сафари, кстати, как? Нормально?

[Great Rash]

Сафари, как ни странно, тоже ок.