Можно ли связать через css два тега?

[rutell]

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

На странице есть картинка-ссылка <a> и текст спрятанный <p style="display:none;">. При наведении на картинку нужно, чтобы она менялась (ну это понятно a:hover {url(/image.jpg)} ), но и чтобы одновременно с ней появлялся невидимый текст, который находится неподалеку. Есть выход сделать появляющийся текст тоже картинкой которая вылазиет при a:hover. Но в целях SEO хочется все же, чтобы тексты на странице были текстами, а не картинками...

Возможно ли сделать через css то, что я говорю?

Если возможно, подкиньте идею, пожалуйста. Так не хочется лезть в яву...

[npofopr]

можно еще менять у текста opacity

или посмотрите в сторону content: "";

меня конечно обругают, но может так

Edited October 15, 2012 by npofopr

[ils]

http://jsfiddle.net/ils_user/yyRu4/1/ Edited October 15, 2012 by ils

[rutell]

Отличные варианты, спасибо большое... не знала, что можно так: a:hover+p - это во всех браузерах работает?

А первый вариант никак не пойму принцип, почему при наведении на img срабатывает p, (наверное потому что div:hover в любом случае срабатывает)главное, что работает

Еще раз спасибо!

[ils]

это во всех браузерах работает?

Chrome, Firefox, Opera - Работает.

IE не проверял, но, насколько мне помниться, должно работать начиная 7-ой версии.

[rutell]

Что-то не работает этот прием a+p

Может я что-то не так делаю? Вот пример:

css

p.main_page_p1 {

display: none;

}

a.main_page_img1:hover+p.main_page_p1{
    display: block;

}

html

<table><tr><td><a class="main_page_img1" href="/.html"><img></a></td></tr></table>

<table><tr><td><p class="main_page_p1">текст</p></td></tr></table>

ссылка на сайт, где это реализуется http://svet58.ru/

Edited October 24, 2012 by rutell

[hypnocolor]

Ну зачем вы лезете в дебри, если не знаете основ?

Почитайте здесь, для чего используется + в CSS.

...невидимый текст, который находится неподалеку...

То есть, по-вашему, ссылка в одной таблице, и текст, который нужно показывать, в другой таблице — это «неподалёку»? Без JS в вашем случае не обойтись.

И никогда больше не называйте JS «явой», пожалуйста.

Edited October 24, 2012 by hypnocolor

[strange_atom]

rutell, при таком способе у селекторов, между которыми Вы ставите + должен быть один родитель и в html между ними не должно быть других тегов

т.е. даже

<a class="main_page_img1" href="/.html"><img></a>
<div>
    <p class="main_page_p1">текст</p>
</div>

при таких стилях не сработает, а вот без дива - сработает

upd:

хех, снова опередели.

rutell, Вам правильно говорят. Учите матчасть

Edited October 24, 2012 by strange_atom