Changing the property of outer DIV while hovering over inner <a> Element

I am trying to make a button in a purely CSS way (I am trying to avoid javascript as much as possible) I have the following code

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;
}

Now, my problem is that I wish to change the background color of the outer element (the o开发者_Go百科ne with class as 'Button'). The above code changes the background color of the element rather the the enclosing . Any ideas how I can get this (without using javascript)?

---

The pseudo class :hover can be applied to non anchor elements as well:

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

---

That is impossible. CSS-selectors are not capable of selecting parent elements. They cannot walk up the DOM. That is why i prefer XPath over CSS-selectors.

---

I am answering my own question, in the hope that the others, who might stumble upon this thread later on, can benefit if they have the same problem (so that they need to crawl the web as much as I did today :-P).

As, Elusive said, it is NOT possible to select a parent element through CSS-selectors.

And the code below worked for me:

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;
}

I made the < a> element display style 'block'. And I was able to achieve the effect I was looking for.