Stop :active state from propagating to parent

I have a parent container, and a button inside that container. When you click the parent, I want the whole thing to be active and apply a background color to indicate that the click has been registered. However, when I click the child, I want ONLY the child to be active so that the background color is applied only to the child and it is clear where the click has been registered. How do I stop the :active state from propagating to the parent?

Here is an example of what I am trying to do:

HTML

<div class="container">
    <div class="inner-button"> hello </div>
</div>

CSS

.container {
    width: 100%;
    height: 45px;
    border: solid 1px;
}

.inner-button {
    width: 45px;
    height: 30px;
    border: solid 1px;
}

.container:active {
    background-color: #00FF00;
}

.inner-button:active {
    background-color: #FF3300;
}

In this example, I want the whole thing to flash green when you click the outer div, and ONLY the inner div to flash red when it is clicked. Currently the outer div flashes no matter where you click.

Here is the jsfiddle

EDIT: I did try calling stopPropagation() on the event, and it didn't help with the state.

Answers


You can't achieve your aim with css with that code but you can make it in his way:

<div class="container">
<div class="ut"></div>
<div class="inner"> hello </div>

Css

.container
{
position:relative;
width:100px;
height:100px;
border:solid thin;
}

.inner
{
position:absolute;
width:35px;
height:35px;
border:solid thin;
z-index:100;
}

.inner:active
{
background:red;
}

.ut
{
position:absolute;
width:100px;
height:100px;
border:solid thin;
}

.ut:active
{
background:green;
}

You can't do it with a container. You should add a division with the same or lower position.

http://jsfiddle.net/fbofpjec/1/

Sorry for grammar.


Need Your Help

Determine Which Domain is More Commonly Entered (WWW)

web dns google-analytics subdomain analytics

Is there a way (be it with Analytics, or etc.) to determine which version of my domain is entered more frequently? (domain.com OR www.domain.com)

WP7 Page Navigation..Null exception

windows-phone-7 navigation nullreferenceexception

I'm making the app and it involves crating a local account using textfiles etc. At first time run, the app is meant to navigate to the page called "MainPage" but, if the file "FTR.dat" doesn't exis...

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.