Селектор атрибутов и псведокласс :hover

[Delat]

Как сделать, чтобы при наводке курсора на белый треугольник открывалось зелёное подменю

при условии, что белый треугольник подгружается из такой вот конструкции:

a[href^="##"]:before {
			 display: inline-block;
			 width: 12px;
			 height: 6px;
			 margin-right: 0.5em;

			 content: "";

			 background: url(../img/bullet.png);
}

/*———————--
Выводим подменю
————————*/

.header span {
font-family:Verdana;
font-size:10px;
color:rgb(96,96,96);
padding-top:46px;
padding-left:797px;
text-align:left;
display:block;
position:relative;
}
.header span span {
display:none;
position:absolute;
}
.header span:hover span {
display:block;
font:10px Verdana;
color:#EBECF7;
margin:0px;
padding:5px;
width:163px;
background:green;
white-space:pre-wrap;
}

HTML:

<div class=header>
<span>Дистрибьютор отопительного оборудования <a href="##"></a>
<span> Комплексная поставка, проектирование, монтаж и сопровождение инженерных систем.
Работаем с оптовыми клиентами и регионами РФ.</span>
</span>
</div>

[mrnobody]

Попробуйте так

.header a:hover+span

И зачем вы переписываете одно и тоже font-size: 10px; и font-family: Verdana;. Лучше перенесите сокращенное свойство font: 10px Verdana; из .header span:hover span в .header span . И при ховере по ссылке оставить только display: block;

.header span {
font:10px Verdana;
color:rgb(96, 96, 96);
padding-top:46px;
padding-left:797px;
text-align:left;
display: block;
position:relative;
}
.header span span {
display:none;
position:absolute;
color:#EBECF7;
margin:0px;
padding:5px;
width:163px;
background:green;
white-space:pre-wrap;
}
.header a:hover+span {
display:block;
}

Edited June 4, 2013 by mrnobody

[ZenCoder]

ссылку дайте )

.активныйСелектор .вложенныйКонтейнер {

display:none;

}

.активныйСелектор:hover .вложенныйКонтейнер{

display: block; ( inline-block)

}

альтернативно можно менять height на transition ... будет плавно выворачиваться и уползать

Edited June 4, 2013 by ZenCoder

[Vulner]

Замените

.header span:hover span

на

.header a[href^="##"]:hover + span

А вообще кстати для чего в данном случае вы используете :before? Вроде и без него же тот же эффект..

Извиняюсь, выше уже написали решение, пока я проверял

Edited June 4, 2013 by Vulner

[Delat]

А вообще кстати для чего в данном случае вы используете :before?

есть место, где этот набор правил с :before применяется в том числе к другим элементам на странице

[Vulner]

А вообще кстати для чего в данном случае вы используете :before?

есть место, где этот набор правил с :before применяется в том числе к другим элементам на странице

Понял, не подумал что-то сразу

[Delat]

Попробуйте так

.header a:hover+span

И зачем вы переписываете одно и тоже font-size: 10px; и font-family: Verdana;. Лучше перенесите сокращенное свойство font: 10px Verdana; из .header span:hover span в .header span . И при ховере по ссылке оставить только display: block;

.header span {
font:10px Verdana;
color:rgb(96, 96, 96);
padding-top:46px;
padding-left:797px;
text-align:left;
display: block;
position:relative;
}
.header span span {
display:none;
position:absolute;
color:#EBECF7;
margin:0px;
padding:5px;
width:163px;
background:green;
white-space:pre-wrap;
}
.header a:hover+span {
display:block;
}

а как можно сделать, чтобы подменю не исчезало так сразу? Когда навожу на треугольник, а потом опускаю вниз курсор, то подменю сразу исчезает.

[mrnobody]

А вот исчезать будет из-за того что элемент span является сестринским элементом, а не дочерним относительно ссылки a. Так что с помощью css это нельзя реализовать. потому что он не вложен.

http://jsfiddle.net/mrnobody/ZKAaF/

Это как в выпадающем меню, нужно чтобы подпункт был внутри пункта меню.

Edited June 4, 2013 by mrnobody

[ZenCoder]

Псай, харош в диверсии играть