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 one 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)?

Answers


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

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

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.


Need Your Help

Fractal generator for android Bitmap / Canvas

android android-canvas

I want to create a Fractal generator for Android.

Angularjs - How to use module in only 1 controller

javascript angularjs

I'm learning Angularjs and I have 2 templates pages - a login.html page and an index.html page.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.