Изменение свойства внешнего DIV при наведении на внутренний элемент <a>

Question

Я пытаюсь сделать кнопку чисто CSS-способом (я стараюсь максимально избегать JavaScript) У меня есть следующий код

CSS:

.Button a{
text-align:center;
vertical-align:middle;
background-color:transparent;
Height:100%;
color:white;
text-decoration:none;
}
.Button a:hover{
background-color:brown;
cursor:default;
}
.Button a:active{
background-color:gray;
}

СейчасМоя проблема заключается в том, что я хочу изменить цвет фона внешнего элемента (тот, который с классом, как «Кнопка»).Приведенный выше код меняет цвет фона элемента, а не вмещающий.Любые идеи, как я могу получить это (без использования JavaScript)?

Answer 1

Псевдокласс :hover может быть применен и к элементам без привязки:

div.Button:hover {border:1px solid red}

Answer 2

Я отвечаю на свой вопрос, в надежде, что другие, которые могут наткнуться на эту ветку позже, могут извлечь выгоду, если у них возникнет та же проблема (так что им нужно сканировать сеть столько же, сколько я сделал сегодня: -P).

Как сказал Elusive, НЕ можно выбрать родительский элемент с помощью CSS-селекторов.

И код ниже работал для меня:

a.Button {
text-align:center;
vertical-align:middle;
background-color:transparent;
display:block;
Height:100%;
min-width:100px;
color:white;
padding:3px 3px 3px 3px;
text-decoration:none;
}
a.Button:hover{
background-color:brown;
cursor:default;
}
a.Button:active{
background-color:gray;
}

Я сделал стиль отображения элемента «блоком». И я смог добиться эффекта, который искал.

Answer 3

Это невозможно. CSS-селекторы не способны выбирать родительские элементы. Они не могут ходить по DOM. Вот почему я предпочитаю XPath, а не CSS-селекторы.