CSS, псевдокласс :hover

val005 · August 15, 2011

Возник вопрос относительно css псевдокласса :hover

нужно, чтобы при наведении мыши на один элемент менялся стиль другого элемента, причём последний не является дочерним и располагается в другом месте html - кода

пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style>
#a {
	color:#0F0;
}
#a:hover {
	color: #000;
}
#p {
	color: #C00;
	display:none;
}
#a:hover #p {
	color: #C0F;
	display:block;
}
</style>
</head>
<body>
<a href="" id="a">123</a>
<p id="p">456</p>
</body>
</html>

если же поместить тег внутрь <a>, то естественно всё будет работать:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style>
#a {
	color:#0F0;
}
#a:hover {
	color: #000;
}
#p {
	color: #C00;
	display:none;
}
#a:hover #p {
	color: #C0F;
	display:block;
}
</style>
</head>
<body>
<a href="" id="a">123
<p id="p">456</p>
</a>
</body>
</html>

Примечание: jav-у юзать нельзя))

sigma77 · August 15, 2011

val005,


#a:hover + #p {
    color: #C0F;
    display:block;
}

val005 · August 15, 2011

val005,


#a:hover + #p {
    color: #C0F;
    display:block;
}

Спасибо за ответ и помощь

но это ведь лишь пример, а на деле требуемые теги вряд ли будут рядом и вот такой код не пройдёт:

<body>
<a href="" id="a">123</a>
<strong>789</strong>
<p id="p">456</p>
</body>

может есть ещё какие-нибудь селекторы или на этом css исчерпывается?

sigma77 · August 15, 2011

val005,

Ну, если взаимное расположение тегов случайно, то только js. Если же структура постоянна, то можно и дальше "наращивать" селекторы. Но, ИМХО, лучше всё-таки js.

Если по-подробней опишешь задачу, то может можно будет найти другое решение.

Seva1986 · August 15, 2011

val005,
#a:hover + #p {
 color: #C0F;
 display:block;
}
Спасибо за ответ и помощь
но это ведь лишь пример, а на деле требуемые теги вряд ли будут рядом и вот такой код не пройдёт:
<body>
<a href="" id="a">123</a>
789
456
</body>
может есть ещё какие-нибудь селекторы или на этом css исчерпывается?

Ну, если взаимное расположение тегов случайно, то только js. Если же структура постоянна, то можно и дальше "наращивать" селекторы. Но, ИМХО, лучше всё-таки js.
Если по-подробней опишешь задачу, то может можно будет найти другое решение.

Не только...

в CSS3 есть такой селектор "~" называеться "ообобщённых родственных элементов" или както так работет в нормальных браузерах.... выберет все элемены имеющие с текущим общего родителя.....

Пример

div ~ a{
margin:0;
}

Edited August 15, 2011 by Seva1986

val005 · August 16, 2011

в CSS3 есть такой селектор "~" называеться "ообобщённых родственных элементов" или както так работет в нормальных браузерах.... выберет все элемены имеющие с текущим общего родителя.....

да, действительно. Спасибо огромное))

вот тут подробнее про него есть

кстати он даже в Dreamweaver CS5 не пашет, а в последней опере - работает

получился такой код. правда всё равно далеко не уйдёшь от родителя, но хотя бы подряд не ставить теги)))

всем огромное спасибо, жаль что пока в репу не могу поставить...

Seva1986 · August 16, 2011

в CSS3 есть такой селектор "~" называеться "ообобщённых родственных элементов" или както так работет в нормальных браузерах.... выберет все элемены имеющие с текущим общего родителя.....
да, действительно. Спасибо огромное))
вот тут подробнее про него есть
кстати он даже в Dreamweaver CS5 не пашет, а в последней опере - работает
получился такой код. правда всё равно далеко не уйдёшь от родителя, но хотя бы подряд не ставить теги)))
всем огромное спасибо, жаль что пока в репу не могу поставить...

Да, я там на него и наткнулся кстати пока лучший сайт по вёрстке из тех что я видел..

rutell · October 24, 2012

в CSS3 есть такой селектор "~" называеться "ообобщённых родственных элементов" или както так работет в нормальных браузерах.... выберет все элемены имеющие с текущим общего родителя.....
да, действительно. Спасибо огромное))
вот тут подробнее про него есть
кстати он даже в Dreamweaver CS5 не пашет, а в последней опере - работает
получился такой код. правда всё равно далеко не уйдёшь от родителя, но хотя бы подряд не ставить теги)))
всем огромное спасибо, жаль что пока в репу не могу поставить...

Спасибо большое, сейчас применю

Sign In

CSS, псевдокласс :hover

Question

val005

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

sigma77

Link to comment

Share on other sites

val005

Link to comment

Share on other sites

sigma77

Link to comment

Share on other sites

Seva1986

Link to comment

Share on other sites

val005

Link to comment

Share on other sites

Seva1986

Link to comment

Share on other sites

rutell

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information